aboutsummaryrefslogtreecommitdiffstats
path: root/src/ng/directive/ngIf.js
diff options
context:
space:
mode:
Diffstat (limited to 'src/ng/directive/ngIf.js')
-rwxr-xr-xsrc/ng/directive/ngIf.js27
1 files changed, 11 insertions, 16 deletions
diff --git a/src/ng/directive/ngIf.js b/src/ng/directive/ngIf.js
index c8166ee5..9d99d859 100755
--- a/src/ng/directive/ngIf.js
+++ b/src/ng/directive/ngIf.js
@@ -30,7 +30,7 @@
* 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 attribute to animate the **enter**
+ * Additionally, you can provide animations via the ngAnimate module to animate the **enter**
* and **leave** effects.
*
* @animations
@@ -47,36 +47,32 @@
<file name="index.html">
Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /><br/>
Show when checked:
- <span ng-if="checked" ng-animate="'example'">
+ <span ng-if="checked" class="example-if">
I'm removed when the checkbox is unchecked.
</span>
</file>
<file name="animations.css">
- .example-leave, .example-enter {
+ .example-if.ng-enter,
+ .example-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;
- -ms-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;
}
- .example-enter {
+ .example-if.ng-enter,
+ .example-if.ng-leave.ng-leave-active {
opacity:0;
}
- .example-enter.example-enter-active {
- opacity:1;
- }
- .example-leave {
+ .example-if.ng-enter.ng-enter-active,
+ .example-if.ng-leave {
opacity:1;
}
- .example-leave.example-leave-active {
- opacity:0;
- }
</file>
</example>
*/
-var ngIfDirective = ['$animator', function($animator) {
+var ngIfDirective = ['$animate', function($animate) {
return {
transclude: 'element',
priority: 1000,
@@ -84,11 +80,10 @@ var ngIfDirective = ['$animator', function($animator) {
restrict: 'A',
compile: function (element, attr, transclude) {
return function ($scope, $element, $attr) {
- var animate = $animator($scope, $attr);
var childElement, childScope;
$scope.$watch($attr.ngIf, function ngIfWatchAction(value) {
if (childElement) {
- animate.leave(childElement);
+ $animate.leave(childElement);
childElement = undefined;
}
if (childScope) {
@@ -99,7 +94,7 @@ var ngIfDirective = ['$animator', function($animator) {
childScope = $scope.$new();
transclude(childScope, function (clone) {
childElement = clone;
- animate.enter(clone, $element.parent(), $element);
+ $animate.enter(clone, $element.parent(), $element);
});
}
});