fix($animate): abort class-based animations if the element is removed during digest

Prior to this fix, if the element is removed before the digest kicks off then it leads
to an error when a class based animation is run. This fix ensures that the animation will
not run at all if the element does not have a parent element.

Closes #8796

Author: matsko

src/ngAnimate/animate.js

@@ -1015,14 +1015,23 @@ angular.module('ngAnimate', ['ng'])
           }
 
           return cache.promise = runAnimationPostDigest(function(done) {
+            var parentElement = element.parent();
+            var elementNode = extractElementNode(element);
+            var parentNode = elementNode.parentNode;
+            // TODO(matsko): move this code into the animationsDisabled() function once #8092 is fixed
+            if (!parentNode || parentNode['$$NG_REMOVED'] || elementNode['$$NG_REMOVED']) {
+              done();
+              return;
+            }
+
             var cache = element.data(STORAGE_KEY);
             element.removeData(STORAGE_KEY);
 
             var state = element.data(NG_ANIMATE_STATE) || {};
             var classes = resolveElementClasses(element, cache, state.active);
             return !classes
               ? done()
-              : performAnimation('setClass', classes, element, null, null, function() {
+              : performAnimation('setClass', classes, element, parentElement, null, function() {
                   $delegate.setClass(element, classes[0], classes[1]);
                 }, done);
           });

test/ngAnimate/animateSpec.js

@@ -3413,6 +3413,101 @@ describe("ngAnimate", function() {
       });
     });
 
+    it('should skip class-based animations if the element is removed before the digest occurs', function() {
+      var spy = jasmine.createSpy();
+      module(function($animateProvider) {
+        $animateProvider.register('.animated', function() {
+          return {
+            beforeAddClass : spy,
+            beforeRemoveClass : spy,
+            beforeSetClass : spy
+          };
+        });
+      });
+      inject(function($rootScope, $animate, $compile, $rootElement, $document) {
+        $animate.enabled(true);
+
+        var one = $compile('<div class="animated"></div>')($rootScope);
+        var two = $compile('<div class="animated"></div>')($rootScope);
+        var three = $compile('<div class="animated three"></div>')($rootScope);
+
+        $rootElement.append(one);
+        $rootElement.append(two);
+        angular.element($document[0].body).append($rootElement);
+
+        $animate.addClass(one, 'active-class');
+        one.remove();
+
+        $rootScope.$digest();
+        expect(spy).not.toHaveBeenCalled();
+
+        $animate.addClass(two, 'active-class');
+
+        $rootScope.$digest();
+        expect(spy).toHaveBeenCalled();
+
+        spy.reset();
+        $animate.removeClass(two, 'active-class');
+        two.remove();
+
+        $rootScope.$digest();
+        expect(spy).not.toHaveBeenCalled();
+
+        $animate.setClass(three, 'active-class', 'three');
+        three.remove();
+
+        $rootScope.$digest();
+        expect(spy).not.toHaveBeenCalled();
+      });
+    });
+
+    it('should skip class-based animations if ngRepeat has marked the element or its parent for removal', function() {
+      var spy = jasmine.createSpy();
+      module(function($animateProvider) {
+        $animateProvider.register('.animated', function() {
+          return {
+            beforeAddClass : spy,
+            beforeRemoveClass : spy,
+            beforeSetClass : spy
+          };
+        });
+      });
+      inject(function($rootScope, $animate, $compile, $rootElement, $document) {
+        $animate.enabled(true);
+
+        var element = $compile(
+          '<div>' +
+          '  <div ng-repeat="item in items" class="animated">' +
+          '    <span>{{ $index }}</span>' +
+          '  </div>' +
+          '</div>'
+        )($rootScope);
+
+        $rootElement.append(element);
+        angular.element($document[0].body).append($rootElement);
+
+        $rootScope.items = [1,2,3];
+        $rootScope.$digest();
+
+        var child = element.find('div');
+
+        $animate.addClass(child, 'start-animation');
+        $rootScope.items = [2,3];
+        $rootScope.$digest();
+
+        expect(spy).not.toHaveBeenCalled();
+
+        var innerChild = element.find('span');
+
+        $animate.addClass(innerChild, 'start-animation');
+        $rootScope.items = [3];
+        $rootScope.$digest();
+
+        expect(spy).not.toHaveBeenCalled();
+        dealoc(element);
+      });
+    });
+
     it('should call class-based animation callbacks in the correct order when animations are skipped', function() {
       var continueAnimation;
       module(function($animateProvider) {