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;
+            if (!isMatchingElement(element, $rootElement)) { //$rootElement's parent is not inside of the app
+              parentElement = element.parent();
+              if (!parentElement || parentElement.length === 0) {
+                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

@@ -3415,6 +3415,54 @@ 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 call class-based animation callbacks in the correct order when animations are skipped', function() {
       var continueAnimation;
       module(function($animateProvider) {