fix(ngAnimate): allow animations if the body node is changed

matsko · matsko · commit 3bd0ade65945 · 2015-08-31T10:58:20.000-07:00
If an ngIf is placed on the body then resulting node is different from what was there originally and that causes issues with ngAnimate. This patch fixes this. Closes angular#12366
diff --git a/src/ngAnimate/animateQueue.js b/src/ngAnimate/animateQueue.js
@@ -66,10 +66,10 @@ var $$AnimateQueueProvider = ['$animateProvider', function($animateProvider) {
     return (nO.addClass && nO.addClass === cO.removeClass) || (nO.removeClass && nO.removeClass === cO.addClass);
   });
 
-  this.$get = ['$$rAF', '$rootScope', '$rootElement', '$document', '$$body', '$$HashMap',
-               '$$animation', '$$AnimateRunner', '$templateRequest', '$$jqLite', '$$forceReflow',
-       function($$rAF,   $rootScope,   $rootElement,   $document,   $$body,   $$HashMap,
-                $$animation,   $$AnimateRunner,   $templateRequest,   $$jqLite,   $$forceReflow) {
+  this.$get = ['$$rAF', '$rootScope', '$rootElement', '$document', '$$HashMap', '$$animation',
+               '$$AnimateRunner', '$templateRequest', '$$jqLite', '$$forceReflow',
+       function($$rAF,   $rootScope,   $rootElement,   $document,   $$HashMap,   $$animation,
+                $$AnimateRunner,   $templateRequest,   $$jqLite,   $$forceReflow) {
 
     var activeAnimationsLookup = new $$HashMap();
     var disabledElementsLookup = new $$HashMap();
@@ -501,8 +501,17 @@ var $$AnimateQueueProvider = ['$animateProvider', function($animateProvider) {
       return getDomNode(nodeOrElmA) === getDomNode(nodeOrElmB);
     }
 
+    function isBodyElement(node, $document) {
+      // if a ng-if is placed on the <body> tag then we
+      // may end up with a new body element entirely so it's
+      // best to just compare the body directly to the body
+      // node present within the document node.
+      return $document[0].body === node;
+    }
+
     function areAnimationsAllowed(element, parentElement, event) {
-      var bodyElementDetected = isMatchingElement(element, $$body) || element[0].nodeName === 'HTML';
+      var node = getDomNode(element);
+      var bodyElementDetected = isBodyElement(node, $document) || node.nodeName === 'HTML';
       var rootElementDetected = isMatchingElement(element, $rootElement);
       var parentAnimationDetected = false;
       var animateChildren;
@@ -558,7 +567,7 @@ var $$AnimateQueueProvider = ['$animateProvider', function($animateProvider) {
         if (!bodyElementDetected) {
           // we also need to ensure that the element is or will be apart of the body element
           // otherwise it is pointless to even issue an animation to be rendered
-          bodyElementDetected = isMatchingElement(parentElement, $$body);
+          bodyElementDetected = isBodyElement(parentNode, $document);
         }
 
         parentElement = parentElement.parent();
