OLD | NEW |
1 part of angular.directive; | 1 part of angular.directive; |
2 | 2 |
3 /** | 3 /** |
4 * The ngSwitch directive is used to conditionally swap DOM structure on your | 4 * The ngSwitch directive is used to conditionally swap DOM structure on your |
5 * template based on a scope expression. Elements within ngSwitch but without | 5 * template based on a scope expression. Elements within ngSwitch but without |
6 * ngSwitchWhen or ngSwitchDefault directives will be preserved at the location | 6 * ngSwitchWhen or ngSwitchDefault directives will be preserved at the location |
7 * as specified in the template. | 7 * as specified in the template. |
8 * | 8 * |
9 * The directive itself works similar to ngInclude, however, instead of | 9 * The directive itself works similar to ngInclude, however, instead of |
10 * downloading template code (or loading it from the template cache), ngSwitch | 10 * downloading template code (or loading it from the template cache), ngSwitch |
(...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
42 * <button ng-click="selection=''">Show default</button> | 42 * <button ng-click="selection=''">Show default</button> |
43 * <tt>selection={{selection}}</tt> | 43 * <tt>selection={{selection}}</tt> |
44 * <hr/> | 44 * <hr/> |
45 * <div ng-switch="selection"> | 45 * <div ng-switch="selection"> |
46 * <div ng-switch-when="settings">Settings Div</div> | 46 * <div ng-switch-when="settings">Settings Div</div> |
47 * <div ng-switch-when="home">Home Span</div> | 47 * <div ng-switch-when="home">Home Span</div> |
48 * <div ng-switch-default>default</div> | 48 * <div ng-switch-default>default</div> |
49 * </div> | 49 * </div> |
50 * </div> | 50 * </div> |
51 */ | 51 */ |
52 @NgDirective( | 52 @Decorator( |
53 selector: '[ng-switch]', | 53 selector: '[ng-switch]', |
54 map: const { | 54 map: const { |
55 'ng-switch': '=>value', | 55 'ng-switch': '=>value', |
56 'change': '&onChange' | 56 'change': '&onChange' |
57 }, | 57 }, |
58 visibility: NgDirective.DIRECT_CHILDREN_VISIBILITY) | 58 visibility: Directive.DIRECT_CHILDREN_VISIBILITY) |
59 class NgSwitchDirective { | 59 class NgSwitch { |
60 Map<String, List<_Case>> cases = new Map<String, List<_Case>>(); | 60 Map<String, List<_Case>> cases = new Map<String, List<_Case>>(); |
61 List<_BlockScopePair> currentBlocks = <_BlockScopePair>[]; | 61 List<_ViewScopePair> currentViews = <_ViewScopePair>[]; |
62 Function onChange; | 62 Function onChange; |
63 final Scope scope; | 63 final Scope scope; |
64 | 64 |
65 NgSwitchDirective(this.scope) { | 65 NgSwitch(this.scope) { |
66 cases['?'] = <_Case>[]; | 66 cases['?'] = <_Case>[]; |
67 } | 67 } |
68 | 68 |
69 addCase(String value, BlockHole anchor, BoundBlockFactory blockFactory) { | 69 addCase(String value, ViewPort anchor, BoundViewFactory viewFactory) { |
70 cases.putIfAbsent(value, () => <_Case>[]); | 70 cases.putIfAbsent(value, () => <_Case>[]); |
71 cases[value].add(new _Case(anchor, blockFactory)); | 71 cases[value].add(new _Case(anchor, viewFactory)); |
72 } | 72 } |
73 | 73 |
74 set value(val) { | 74 set value(val) { |
75 currentBlocks | 75 currentViews |
76 ..forEach((_BlockScopePair pair) { | 76 ..forEach((_ViewScopePair pair) { |
77 pair.block.remove(); | 77 pair.port.remove(pair.view); |
78 pair.scope.destroy(); | 78 pair.scope.destroy(); |
79 }) | 79 }) |
80 ..clear(); | 80 ..clear(); |
81 | 81 |
82 val = '!$val'; | 82 val = '!$val'; |
83 (cases.containsKey(val) ? cases[val] : cases['?']) | 83 (cases.containsKey(val) ? cases[val] : cases['?']) |
84 .forEach((_Case caze) { | 84 .forEach((_Case caze) { |
85 Scope childScope = scope.createChild(new PrototypeMap(scope.context)); | 85 Scope childScope = scope.createChild(new PrototypeMap(scope.context)); |
86 var block = caze.blockFactory(childScope)..insertAfter(caze.anchor); | 86 var view = caze.viewFactory(childScope); |
87 currentBlocks.add(new _BlockScopePair(block, childScope)); | 87 caze.anchor.insert(view); |
| 88 currentViews.add(new _ViewScopePair(view, caze.anchor, |
| 89 childScope)); |
88 }); | 90 }); |
89 if (onChange != null) { | 91 if (onChange != null) { |
90 onChange(); | 92 onChange(); |
91 } | 93 } |
92 } | 94 } |
93 } | 95 } |
94 | 96 |
95 class _BlockScopePair { | 97 class _ViewScopePair { |
96 final Block block; | 98 final View view; |
| 99 final ViewPort port; |
97 final Scope scope; | 100 final Scope scope; |
98 | 101 |
99 _BlockScopePair(this.block, this.scope); | 102 _ViewScopePair(this.view, this.port, this.scope); |
100 } | 103 } |
101 | 104 |
102 class _Case { | 105 class _Case { |
103 final BlockHole anchor; | 106 final ViewPort anchor; |
104 final BoundBlockFactory blockFactory; | 107 final BoundViewFactory viewFactory; |
105 | 108 |
106 _Case(this.anchor, this.blockFactory); | 109 _Case(this.anchor, this.viewFactory); |
107 } | 110 } |
108 | 111 |
109 @NgDirective( | 112 @Decorator( |
110 selector: '[ng-switch-when]', | 113 selector: '[ng-switch-when]', |
111 children: NgAnnotation.TRANSCLUDE_CHILDREN, | 114 children: Directive.TRANSCLUDE_CHILDREN, |
112 map: const {'.': '@value'}) | 115 map: const {'.': '@value'}) |
113 class NgSwitchWhenDirective { | 116 class NgSwitchWhen { |
114 final NgSwitchDirective ngSwitch; | 117 final NgSwitch ngSwitch; |
115 final BlockHole hole; | 118 final ViewPort port; |
116 final BoundBlockFactory blockFactory; | 119 final BoundViewFactory viewFactory; |
117 final Scope scope; | 120 final Scope scope; |
118 | 121 |
119 NgSwitchWhenDirective(this.ngSwitch, this.hole, this.blockFactory, this.scope)
; | 122 NgSwitchWhen(this.ngSwitch, this.port, this.viewFactory, this.scope); |
120 | 123 |
121 set value(String value) => ngSwitch.addCase('!$value', hole, blockFactory); | 124 set value(String value) => ngSwitch.addCase('!$value', port, viewFactory); |
122 } | 125 } |
123 | 126 |
| 127 @Decorator( |
| 128 children: Directive.TRANSCLUDE_CHILDREN, |
| 129 selector: '[ng-switch-default]') |
| 130 class NgSwitchDefault { |
124 | 131 |
125 @NgDirective( | 132 NgSwitchDefault(NgSwitch ngSwitch, ViewPort port, |
126 children: NgAnnotation.TRANSCLUDE_CHILDREN, | 133 BoundViewFactory viewFactory, Scope scope) { |
127 selector: '[ng-switch-default]') | 134 ngSwitch.addCase('?', port, viewFactory); |
128 class NgSwitchDefaultDirective { | |
129 | |
130 NgSwitchDefaultDirective(NgSwitchDirective ngSwitch, BlockHole hole, | |
131 BoundBlockFactory blockFactory, Scope scope) { | |
132 ngSwitch.addCase('?', hole, blockFactory); | |
133 } | 135 } |
134 } | 136 } |
OLD | NEW |