NgUnlessDirective class
The ng-unless
directive compliments the ng-if
(provided by
NgIfAttrDirective
) directive.
The ng-unless
directive recreates/destroys the DOM subtree containing the
directive based on the falsy/truthy value of the provided expression.
Specifically, if the expression assigned to ng-unless
evaluates to a true
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-unless
to bind to a javascript primitive defined in the parent scope.
In such a situation, any modifications made to the variable in the
ng-unless
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-unless
differs from ng-show
and ng-hide
in that ng-unless
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-unless instead of ng-show, we avoid the cost of the showdown
filter, the repeater, etc. -->
<div ng-unless="terseView">
{{obj.details.markdownText | showdown}}
<div ng-repeat="item in obj.details.items">
...
</div>
</div>
@NgDirective( children: NgAnnotation.TRANSCLUDE_CHILDREN, selector:'[ng-unless]', map: const {'.': '=>condition'}) class NgUnlessDirective extends _NgUnlessIfAttrDirectiveBase { NgUnlessDirective(BoundBlockFactory boundBlockFactory, BlockHole blockHole, Scope scope): super(boundBlockFactory, blockHole, scope); set condition(value) => (!toBool(value) ? _ensureBlockExists() : _ensureBlockDestroyed()); }
Extends
_NgUnlessIfAttrDirectiveBase > NgUnlessDirective
Constructors
new NgUnlessDirective(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.
NgUnlessDirective(BoundBlockFactory boundBlockFactory, BlockHole blockHole, Scope scope): super(boundBlockFactory, blockHole, scope);
Properties
dynamic set condition(value) #
set condition(value) => (!toBool(value) ? _ensureBlockExists() : _ensureBlockDestroyed());