| OLD | NEW |
| 1 part of angular.directive; | 1 part of angular.directive; |
| 2 | 2 |
| 3 /** | 3 /** |
| 4 * Base class for NgIfAttrDirective and NgUnlessAttrDirective. | 4 * Base class for NgIfAttrDirective and NgUnlessAttrDirective. |
| 5 */ | 5 */ |
| 6 abstract class _NgUnlessIfAttrDirectiveBase { | 6 abstract class _NgUnlessIfAttrDirectiveBase { |
| 7 final BoundBlockFactory _boundBlockFactory; | 7 final BoundBlockFactory _boundBlockFactory; |
| 8 final BlockHole _blockHole; | 8 final BlockHole _blockHole; |
| 9 final Scope _scope; | 9 final Scope _scope; |
| 10 | 10 |
| 11 Block _block; | 11 Block _block; |
| 12 | 12 |
| 13 /** | 13 /** |
| 14 * The new child scope. This child scope is recreated whenever the `ng-if` | 14 * The new child scope. This child scope is recreated whenever the `ng-if` |
| 15 * subtree is inserted into the DOM and destroyed when it's removed from the | 15 * subtree is inserted into the DOM and destroyed when it's removed from the |
| 16 * DOM. Refer | 16 * DOM. Refer |
| 17 * https://github.com/angular/angular.js/wiki/The-Nuances-of-Scope-prototypica
l-Inheritance prototypical inheritance | 17 * https://github.com/angular/angular.js/wiki/The-Nuances-of-Scope-Prototypal-
Inheritance prototypal inheritance |
| 18 */ | 18 */ |
| 19 Scope _childScope; | 19 Scope _childScope; |
| 20 | 20 |
| 21 _NgUnlessIfAttrDirectiveBase(this._boundBlockFactory, this._blockHole, | 21 _NgUnlessIfAttrDirectiveBase(this._boundBlockFactory, this._blockHole, this._s
cope); |
| 22 this._scope); | |
| 23 | 22 |
| 24 // Override in subclass. | 23 // Override in subclass. |
| 25 set condition(value); | 24 set condition(value); |
| 26 | 25 |
| 27 void _ensureBlockExists() { | 26 void _ensureBlockExists() { |
| 28 if (_block == null) { | 27 if (_block == null) { |
| 29 _childScope = _scope.createChild(new PrototypeMap(_scope.context)); | 28 _childScope = _scope.$new(); |
| 30 _block = _boundBlockFactory(_childScope); | 29 _block = _boundBlockFactory(_childScope); |
| 31 var insertBlock = _block; | 30 _block.insertAfter(_blockHole); |
| 32 _scope.rootScope.domWrite(() { | |
| 33 insertBlock.insertAfter(_blockHole); | |
| 34 }); | |
| 35 } | 31 } |
| 36 } | 32 } |
| 37 | 33 |
| 38 void _ensureBlockDestroyed() { | 34 void _ensureBlockDestroyed() { |
| 39 if (_block != null) { | 35 if (_block != null) { |
| 40 var removeBlock = _block; | 36 _block.remove(); |
| 41 _scope.rootScope.domWrite(() { | 37 _childScope.$destroy(); |
| 42 removeBlock.remove(); | |
| 43 }); | |
| 44 _childScope.destroy(); | |
| 45 _block = null; | 38 _block = null; |
| 46 _childScope = null; | 39 _childScope = null; |
| 47 } | 40 } |
| 48 } | 41 } |
| 49 } | 42 } |
| 50 | 43 |
| 51 | 44 |
| 52 /** | 45 /** |
| 53 * The `ng-if` directive compliments the `ng-unless` (provided by | 46 * The `ng-if` directive compliments the `ng-unless` (provided by |
| 54 * [NgUnlessAttrDirective]) directive. | 47 * [NgUnlessAttrDirective]) directive. |
| 55 * | 48 * |
| 56 * directive based on the **truthy/falsy** value of the provided expression. | 49 * directive based on the **truthy/falsy** value of the provided expression. |
| 57 * Specifically, if the expression assigned to `ng-if` evaluates to a `false` | 50 * Specifically, if the expression assigned to `ng-if` evaluates to a `false` |
| 58 * value, then the subtree is removed from the DOM. Otherwise, *a clone of the | 51 * value, then the subtree is removed from the DOM. Otherwise, *a clone of the |
| 59 * subtree* is reinserted into the DOM. This clone is created from the compiled | 52 * subtree* is reinserted into the DOM. This clone is created from the compiled |
| 60 * state. As such, modifications made to the element after compilation (e.g. | 53 * state. As such, modifications made to the element after compilation (e.g. |
| 61 * changing the `class`) are lost when the element is destroyed. | 54 * changing the `class`) are lost when the element is destroyed. |
| 62 * | 55 * |
| 63 * Whenever the subtree is inserted into the DOM, it always gets a new child | 56 * Whenever the subtree is inserted into the DOM, it always gets a new child |
| 64 * scope. This child scope is destroyed when the subtree is removed from the | 57 * scope. This child scope is destroyed when the subtree is removed from the |
| 65 * DOM. Refer | 58 * DOM. Refer |
| 66 * https://github.com/angular/angular.js/wiki/The-Nuances-of-Scope-prototypical-
Inheritance prototypical inheritance | 59 * https://github.com/angular/angular.js/wiki/The-Nuances-of-Scope-Prototypal-In
heritance prototypal inheritance |
| 67 * | 60 * |
| 68 * This has an important implication when `ng-model` is used inside an `ng-if` | 61 * This has an important implication when `ng-model` is used inside an `ng-if` |
| 69 * to bind to a javascript primitive defined in the parent scope. In such a | 62 * to bind to a javascript primitive defined in the parent scope. In such a |
| 70 * situation, any modifications made to the variable in the `ng-if` subtree will | 63 * situation, any modifications made to the variable in the `ng-if` subtree will |
| 71 * be made on the child scope and override (hide) the value in the parent scope. | 64 * be made on the child scope and override (hide) the value in the parent scope. |
| 72 * The parent scope will remain unchanged by changes affected by this subtree. | 65 * The parent scope will remain unchanged by changes affected by this subtree. |
| 73 * | 66 * |
| 74 * Note: `ng-if` differs from `ng-show` and `ng-hide` in that `ng-if` completely | 67 * Note: `ng-if` differs from `ng-show` and `ng-hide` in that `ng-if` completely |
| 75 * removes and recreates the element in the DOM rather than changing its | 68 * removes and recreates the element in the DOM rather than changing its |
| 76 * visibility via the `display` css property. A common case when this | 69 * visibility via the `display` css property. A common case when this |
| (...skipping 11 matching lines...) Expand all Loading... |
| 88 * ... | 81 * ... |
| 89 * </div> | 82 * </div> |
| 90 * </div> | 83 * </div> |
| 91 */ | 84 */ |
| 92 @NgDirective( | 85 @NgDirective( |
| 93 children: NgAnnotation.TRANSCLUDE_CHILDREN, | 86 children: NgAnnotation.TRANSCLUDE_CHILDREN, |
| 94 selector:'[ng-if]', | 87 selector:'[ng-if]', |
| 95 map: const {'.': '=>condition'}) | 88 map: const {'.': '=>condition'}) |
| 96 class NgIfDirective extends _NgUnlessIfAttrDirectiveBase { | 89 class NgIfDirective extends _NgUnlessIfAttrDirectiveBase { |
| 97 NgIfDirective(BoundBlockFactory boundBlockFactory, | 90 NgIfDirective(BoundBlockFactory boundBlockFactory, |
| 98 BlockHole blockHole, | 91 BlockHole blockHole, |
| 99 Scope scope): super(boundBlockFactory, blockHole, scope); | 92 Scope scope): super(boundBlockFactory, blockHole, scope); |
| 100 | 93 |
| 101 set condition(value) { | 94 set condition(value) { |
| 102 if (toBool(value)) { | 95 if (toBool(value)) |
| 103 _ensureBlockExists(); | 96 _ensureBlockExists(); |
| 104 } else { | 97 else |
| 105 _ensureBlockDestroyed(); | 98 _ensureBlockDestroyed(); |
| 106 } | |
| 107 } | 99 } |
| 108 } | 100 } |
| 109 | 101 |
| 110 | 102 |
| 111 /** | 103 /** |
| 112 * The `ng-unless` directive compliments the `ng-if` (provided by | 104 * The `ng-unless` directive compliments the `ng-if` (provided by |
| 113 * [NgIfAttrDirective]) directive. | 105 * [NgIfAttrDirective]) directive. |
| 114 * | 106 * |
| 115 * The `ng-unless` directive recreates/destroys the DOM subtree containing the | 107 * The `ng-unless` directive recreates/destroys the DOM subtree containing the |
| 116 * directive based on the **falsy/truthy** value of the provided expression. | 108 * directive based on the **falsy/truthy** value of the provided expression. |
| 117 * Specifically, if the expression assigned to `ng-unless` evaluates to a `true` | 109 * Specifically, if the expression assigned to `ng-unless` evaluates to a `true` |
| 118 * value, then the subtree is removed from the DOM. Otherwise, *a clone of the | 110 * value, then the subtree is removed from the DOM. Otherwise, *a clone of the |
| 119 * subtree* is reinserted into the DOM. This clone is created from the compiled | 111 * subtree* is reinserted into the DOM. This clone is created from the compiled |
| 120 * state. As such, modifications made to the element after compilation (e.g. | 112 * state. As such, modifications made to the element after compilation (e.g. |
| 121 * changing the `class`) are lost when the element is destroyed. | 113 * changing the `class`) are lost when the element is destroyed. |
| 122 * | 114 * |
| 123 * Whenever the subtree is inserted into the DOM, it always gets a new child | 115 * Whenever the subtree is inserted into the DOM, it always gets a new child |
| 124 * scope. This child scope is destroyed when the subtree is removed from the | 116 * scope. This child scope is destroyed when the subtree is removed from the |
| 125 * DOM. Refer | 117 * DOM. Refer |
| 126 * https://github.com/angular/angular.js/wiki/The-Nuances-of-Scope-prototypical-
Inheritance prototypical inheritance | 118 * https://github.com/angular/angular.js/wiki/The-Nuances-of-Scope-Prototypal-In
heritance prototypal inheritance |
| 127 * | 119 * |
| 128 * This has an important implication when `ng-model` is used inside an | 120 * This has an important implication when `ng-model` is used inside an |
| 129 * `ng-unless` to bind to a javascript primitive defined in the parent scope. | 121 * `ng-unless` to bind to a javascript primitive defined in the parent scope. |
| 130 * In such a situation, any modifications made to the variable in the | 122 * In such a situation, any modifications made to the variable in the |
| 131 * `ng-unless` subtree will be made on the child scope and override (hide) the | 123 * `ng-unless` subtree will be made on the child scope and override (hide) the |
| 132 * value in the parent scope. The parent scope will remain unchanged by changes | 124 * value in the parent scope. The parent scope will remain unchanged by changes |
| 133 * affected by this subtree. | 125 * affected by this subtree. |
| 134 * | 126 * |
| 135 * Note: `ng-unless` differs from `ng-show` and `ng-hide` in that `ng-unless` | 127 * Note: `ng-unless` differs from `ng-show` and `ng-hide` in that `ng-unless` |
| 136 * completely removes and recreates the element in the DOM rather than changing | 128 * completely removes and recreates the element in the DOM rather than changing |
| (...skipping 13 matching lines...) Expand all Loading... |
| 150 * </div> | 142 * </div> |
| 151 * </div> | 143 * </div> |
| 152 */ | 144 */ |
| 153 @NgDirective( | 145 @NgDirective( |
| 154 children: NgAnnotation.TRANSCLUDE_CHILDREN, | 146 children: NgAnnotation.TRANSCLUDE_CHILDREN, |
| 155 selector:'[ng-unless]', | 147 selector:'[ng-unless]', |
| 156 map: const {'.': '=>condition'}) | 148 map: const {'.': '=>condition'}) |
| 157 class NgUnlessDirective extends _NgUnlessIfAttrDirectiveBase { | 149 class NgUnlessDirective extends _NgUnlessIfAttrDirectiveBase { |
| 158 | 150 |
| 159 NgUnlessDirective(BoundBlockFactory boundBlockFactory, | 151 NgUnlessDirective(BoundBlockFactory boundBlockFactory, |
| 160 BlockHole blockHole, | 152 BlockHole blockHole, |
| 161 Scope scope): super(boundBlockFactory, blockHole, scope); | 153 Scope scope): super(boundBlockFactory, blockHole, scope)
; |
| 162 | 154 |
| 163 set condition(value) { | 155 set condition(value) { |
| 164 if (!toBool(value)) { | 156 if (!toBool(value)) |
| 165 _ensureBlockExists(); | 157 _ensureBlockExists(); |
| 166 } else { | 158 else |
| 167 _ensureBlockDestroyed(); | 159 _ensureBlockDestroyed(); |
| 168 } | |
| 169 } | 160 } |
| 170 } | 161 } |
| OLD | NEW |