NgIfDirective class
The ng-if
directive compliments the ng-unless
(provided by
NgUnlessAttrDirective
) directive.
directive based on the truthy/falsy value of the provided expression.
Specifically, if the expression assigned to ng-if
evaluates to a false
value, then the subtree is removed from the DOM. Otherwise, a clone of the
subtree is reinserted into the DOM. This clone is created from the compiled
state. As such, modifications made to the element after compilation (e.g.
changing the class
) are lost when the element is destroyed.
Whenever the subtree is inserted into the DOM, it always gets a new child scope. This child scope is destroyed when the subtree is removed from the DOM. Refer https://github.com/angular/angular.js/wiki/The-Nuances-of-Scope-Prototypal-Inheritance prototypal inheritance
This has an important implication when ng-model
is used inside an ng-if
to bind to a javascript primitive defined in the parent scope. In such a
situation, any modifications made to the variable in the ng-if
subtree will
be made on the child scope and override (hide) the value in the parent scope.
The parent scope will remain unchanged by changes affected by this subtree.
Note: ng-if
differs from ng-show
and ng-hide
in that ng-if
completely
removes and recreates the element in the DOM rather than changing its
visibility via the display
css property. A common case when this
difference is significant is when using css selectors that rely on an
element's position within the DOM (HTML), such as the :first-child
or
:last-child
pseudo-classes.
Example:
<!-- By using ng-if instead of ng-show, we avoid the cost of the showdown
filter, the repeater, etc. -->
<div ng-if="showDetails">
{{obj.details.markdownText | showdown}}
<div ng-repeat="item in obj.details.items">
...
</div>
</div>
@NgDirective( children: NgAnnotation.TRANSCLUDE_CHILDREN, selector:'[ng-if]', map: const {'.': '=>condition'}) class NgIfDirective extends _NgUnlessIfAttrDirectiveBase { NgIfDirective(BoundBlockFactory boundBlockFactory, BlockHole blockHole, Scope scope): super(boundBlockFactory, blockHole, scope); set condition(value) => (toBool(value) ? _ensureBlockExists() : _ensureBlockDestroyed()); }
Extends
_NgUnlessIfAttrDirectiveBase > NgIfDirective
Constructors
new NgIfDirective(BoundBlockFactory boundBlockFactory, BlockHole blockHole, Scope scope) #
Creates a new Object instance.
Object instances have no meaningful state, and are only useful through their identity. An Object instance is equal to itself only.
NgIfDirective(BoundBlockFactory boundBlockFactory, BlockHole blockHole, Scope scope): super(boundBlockFactory, blockHole, scope);
Properties
dynamic set condition(value) #
set condition(value) => (toBool(value) ? _ensureBlockExists() : _ensureBlockDestroyed());