mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-03-27 03:30:24 +00:00
120 lines
4.4 KiB
JavaScript
120 lines
4.4 KiB
JavaScript
'use strict';
|
|
|
|
/**
|
|
* @ngdoc directive
|
|
* @name ng.directive:ngIf
|
|
* @restrict A
|
|
*
|
|
* @description
|
|
* The `ngIf` directive removes or recreates a portion of the DOM tree based on an
|
|
* {expression}. If the expression assigned to `ngIf` evaluates to a false
|
|
* value then the element is removed from the DOM, otherwise a clone of the
|
|
* element is reinserted into the DOM.
|
|
*
|
|
* `ngIf` differs from `ngShow` and `ngHide` in that `ngIf` 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, such as the `:first-child` or `:last-child` pseudo-classes.
|
|
*
|
|
* Note that when an element is removed using `ngIf` its scope is destroyed and a new scope
|
|
* is created when the element is restored. The scope created within `ngIf` inherits from
|
|
* its parent scope using
|
|
* {@link https://github.com/angular/angular.js/wiki/The-Nuances-of-Scope-Prototypal-Inheritance prototypal inheritance}.
|
|
* An important implication of this is if `ngModel` is used within `ngIf` to bind to
|
|
* a javascript primitive defined in the parent scope. In this case any modifications made to the
|
|
* variable within the child scope will override (hide) the value in the parent scope.
|
|
*
|
|
* Also, `ngIf` recreates elements using their compiled state. An example of this behavior
|
|
* is if an element's class attribute is directly modified after it's compiled, using something like
|
|
* jQuery's `.addClass()` method, and the element is later removed. When `ngIf` recreates the element
|
|
* the added class will be lost because the original compiled state is used to regenerate the element.
|
|
*
|
|
* Additionally, you can provide animations via the `ngAnimate` module to animate the `enter`
|
|
* and `leave` effects.
|
|
*
|
|
* @animations
|
|
* enter - happens just after the ngIf contents change and a new DOM element is created and injected into the ngIf container
|
|
* leave - happens just before the ngIf contents are removed from the DOM
|
|
*
|
|
* @element ANY
|
|
* @scope
|
|
* @priority 600
|
|
* @param {expression} ngIf If the {@link guide/expression expression} is falsy then
|
|
* the element is removed from the DOM tree. If it is truthy a copy of the compiled
|
|
* element is added to the DOM tree.
|
|
*
|
|
* @example
|
|
<example animations="true">
|
|
<file name="index.html">
|
|
Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /><br/>
|
|
Show when checked:
|
|
<span ng-if="checked" class="animate-if">
|
|
I'm removed when the checkbox is unchecked.
|
|
</span>
|
|
</file>
|
|
<file name="animations.css">
|
|
.animate-if {
|
|
background:white;
|
|
border:1px solid black;
|
|
padding:10px;
|
|
}
|
|
|
|
.animate-if.ng-enter, .animate-if.ng-leave {
|
|
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
|
|
-moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
|
|
-o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
|
|
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
|
|
}
|
|
|
|
.animate-if.ng-enter,
|
|
.animate-if.ng-leave.ng-leave-active {
|
|
opacity:0;
|
|
}
|
|
|
|
.animate-if.ng-enter.ng-enter-active,
|
|
.animate-if.ng-leave {
|
|
opacity:1;
|
|
}
|
|
</file>
|
|
</example>
|
|
*/
|
|
var ngIfDirective = ['$animate', function($animate) {
|
|
return {
|
|
transclude: 'element',
|
|
priority: 600,
|
|
terminal: true,
|
|
restrict: 'A',
|
|
$$tlb: true,
|
|
compile: function (element, attr, transclude) {
|
|
return function ($scope, $element, $attr) {
|
|
var block, childScope;
|
|
$scope.$watch($attr.ngIf, function ngIfWatchAction(value) {
|
|
|
|
if (toBoolean(value)) {
|
|
|
|
childScope = $scope.$new();
|
|
transclude(childScope, function (clone) {
|
|
block = {
|
|
startNode: clone[0],
|
|
endNode: clone[clone.length++] = document.createComment(' end ngIf: ' + $attr.ngIf + ' ')
|
|
};
|
|
$animate.enter(clone, $element.parent(), $element);
|
|
});
|
|
|
|
} else {
|
|
|
|
if (childScope) {
|
|
childScope.$destroy();
|
|
childScope = null;
|
|
}
|
|
|
|
if (block) {
|
|
$animate.leave(getBlockElements(block));
|
|
block = null;
|
|
}
|
|
}
|
|
});
|
|
};
|
|
}
|
|
};
|
|
}];
|