| OLD | NEW |
| (Empty) | |
| 1 part of angular.directive; |
| 2 |
| 3 /** |
| 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 |
| 6 * ngSwitchWhen or ngSwitchDefault directives will be preserved at the location |
| 7 * as specified in the template. |
| 8 * |
| 9 * The directive itself works similar to ngInclude, however, instead of |
| 10 * downloading template code (or loading it from the template cache), ngSwitch |
| 11 * simply choses one of the nested elements and makes it visible based on which |
| 12 * element matches the value obtained from the evaluated expression. In other |
| 13 * words, you define a container element (where you place the directive), place |
| 14 * an expression on the **ng-switch="..." attribute**, define any inner elements |
| 15 * inside of the directive and place a when attribute per element. The when |
| 16 * attribute is used to inform ngSwitch which element to display when the on |
| 17 * expression is evaluated. If a matching expression is not found via a when |
| 18 * attribute then an element with the default attribute is displayed. |
| 19 * |
| 20 * ## Example: |
| 21 * |
| 22 * <ANY ng-switch="expression"> |
| 23 * <ANY ng-switch-when="matchValue1">...</ANY> |
| 24 * <ANY ng-switch-when="matchValue2">...</ANY> |
| 25 * <ANY ng-switch-default>...</ANY> |
| 26 * </ANY> |
| 27 * |
| 28 * On child elements add: |
| 29 * |
| 30 * * `ngSwitchWhen`: the case statement to match against. If match then this |
| 31 * case will be displayed. If the same match appears multiple times, all the |
| 32 * elements will be displayed. |
| 33 * * `ngSwitchDefault`: the default case when no other case match. If there |
| 34 * are multiple default cases, all of them will be displayed when no other |
| 35 * case match. |
| 36 * |
| 37 * ## Example: |
| 38 * |
| 39 * <div> |
| 40 * <button ng-click="selection='settings'">Show Settings</button> |
| 41 * <button ng-click="selection='home'">Show Home Span</button> |
| 42 * <button ng-click="selection=''">Show default</button> |
| 43 * <tt>selection={{selection}}</tt> |
| 44 * <hr/> |
| 45 * <div ng-switch="selection"> |
| 46 * <div ng-switch-when="settings">Settings Div</div> |
| 47 * <div ng-switch-when="home">Home Span</div> |
| 48 * <div ng-switch-default>default</div> |
| 49 * </div> |
| 50 * </div> |
| 51 */ |
| 52 @NgDirective( |
| 53 selector: '[ng-switch]', |
| 54 map: const { |
| 55 'ng-switch': '=>value', |
| 56 'change': '&onChange' |
| 57 }, |
| 58 visibility: NgDirective.DIRECT_CHILDREN_VISIBILITY |
| 59 ) |
| 60 class NgSwitchDirective { |
| 61 Map<String, List<_Case>> cases = new Map<String, List<_Case>>(); |
| 62 List<_BlockScopePair> currentBlocks = <_BlockScopePair>[]; |
| 63 Function onChange; |
| 64 Scope scope; |
| 65 |
| 66 NgSwitchDirective(this.scope) { |
| 67 cases['?'] = <_Case>[]; |
| 68 } |
| 69 |
| 70 addCase(String value, BlockHole anchor, BoundBlockFactory blockFactory) { |
| 71 cases.putIfAbsent(value, () => <_Case>[]); |
| 72 cases[value].add(new _Case(anchor, blockFactory)); |
| 73 } |
| 74 |
| 75 set value(val) { |
| 76 currentBlocks |
| 77 ..forEach((_BlockScopePair pair) { |
| 78 pair.block.remove(); |
| 79 pair.scope.$destroy(); |
| 80 }) |
| 81 ..clear(); |
| 82 |
| 83 val = '!$val'; |
| 84 (cases.containsKey(val) ? cases[val] : cases['?']) |
| 85 .forEach((_Case caze) { |
| 86 Scope childScope = scope.$new(); |
| 87 var block = caze.blockFactory(childScope) |
| 88 ..insertAfter(caze.anchor); |
| 89 currentBlocks.add(new _BlockScopePair(block, childScope)); |
| 90 }); |
| 91 if (onChange != null) { |
| 92 onChange(); |
| 93 } |
| 94 } |
| 95 } |
| 96 |
| 97 class _BlockScopePair { |
| 98 final Block block; |
| 99 final Scope scope; |
| 100 |
| 101 _BlockScopePair(this.block, this.scope); |
| 102 } |
| 103 |
| 104 class _Case { |
| 105 final BlockHole anchor; |
| 106 final BoundBlockFactory blockFactory; |
| 107 |
| 108 _Case(this.anchor, this.blockFactory); |
| 109 } |
| 110 |
| 111 @NgDirective( |
| 112 selector: '[ng-switch-when]', |
| 113 children: NgAnnotation.TRANSCLUDE_CHILDREN, |
| 114 map: const { |
| 115 '.': '@value' |
| 116 } |
| 117 ) |
| 118 class NgSwitchWhenDirective { |
| 119 final NgSwitchDirective ngSwitch; |
| 120 final BlockHole hole; |
| 121 final BoundBlockFactory blockFactory; |
| 122 final Scope scope; |
| 123 |
| 124 NgSwitchWhenDirective(this.ngSwitch, this.hole, this.blockFactory, this.scope)
; |
| 125 |
| 126 set value(String value) => |
| 127 ngSwitch.addCase('!$value', hole, blockFactory); |
| 128 } |
| 129 |
| 130 |
| 131 @NgDirective( |
| 132 children: NgAnnotation.TRANSCLUDE_CHILDREN, |
| 133 selector: '[ng-switch-default]' |
| 134 ) |
| 135 class NgSwitchDefaultDirective { |
| 136 |
| 137 NgSwitchDefaultDirective(NgSwitchDirective ngSwitch, BlockHole hole, |
| 138 BoundBlockFactory blockFactory, Scope scope) { |
| 139 ngSwitch.addCase('?', hole, blockFactory); |
| 140 } |
| 141 } |
| OLD | NEW |