fix(ngAnimate): setting classNameFilter disables animation inside ng-if

Closes angular#6539
r3m0t · Mar 14, 2014 · cbd7e88 · cbd7e88
1 parent 3cc02e7
commit cbd7e88
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 2 deletions.
diff --git a/src/ngAnimate/animate.js b/src/ngAnimate/animate.js
@@ -770,7 +770,7 @@ angular.module('ngAnimate', ['ng'])
           fireDOMOperation();
           fireBeforeCallbackAsync();
           fireAfterCallbackAsync();
-          fireDoneCallbackAsync();
+          closeAnimation();
           return;
         }
 
@@ -949,7 +949,7 @@ angular.module('ngAnimate', ['ng'])
                  animation, but class-based animations don't. An example of this
                  failing would be when a parent HTML tag has a ng-class attribute
                  causing ALL directives below to skip animations during the digest */
-              if(runner.isClassBased) {
+              if(runner && runner.isClassBased) {
                 cleanup(element, className);
               } else {
                 $$asyncCallback(function() {

diff --git a/test/ngAnimate/animateSpec.js b/test/ngAnimate/animateSpec.js
@@ -3356,6 +3356,49 @@ describe("ngAnimate", function() {
       });
     });
 
+    it('should animate only the specified CSS className inside ng-if', function() {
+      var captures = {};
+      module(function($animateProvider) {
+        $animateProvider.classNameFilter(/prefixed-animation/);
+        $animateProvider.register('.capture', function() {
+          return {
+            enter : buildFn('enter'),
+            leave : buildFn('leave')
+          };
+
+          function buildFn(key) {
+            return function(element, className, done) {
+              captures[key] = true;
+              (done || className)();
+            }
+          }
+        });
+      });
+      inject(function($rootScope, $compile, $rootElement, $document, $timeout, $templateCache, $sniffer, $animate) {
+        if(!$sniffer.transitions) return;
+
+        var upperElement = $compile('<div><div ng-if=1><span class="capture prefixed-animation"></span></div></div>')($rootScope);
+        $rootElement.append(upperElement);
+        jqLite($document[0].body).append($rootElement);
+
+        $rootScope.$digest();
+        $animate.triggerCallbacks();
+
+        var element = upperElement.find('span');
+
+        var leaveDone = false;
+        $animate.leave(element, function() {
+          leaveDone = true;
+        });
+
+        $rootScope.$digest();
+        $animate.triggerCallbacks();
+
+        expect(captures['leave']).toBe(true);
+        expect(leaveDone).toBe(true);
+      });
+    });
+
     it('should respect the most relevant CSS transition property if defined in multiple classes',
       inject(function($sniffer, $compile, $rootScope, $rootElement, $animate, $timeout) {