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