fix($animate): don't assume the target of pin() is $rootElement's child

angular · Jan 17, 2016 · 4b6b538 · 4b6b538
1 parent 52ea411
commit 4b6b538
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 1 deletion.
diff --git a/src/ngAnimate/animateQueue.js b/src/ngAnimate/animateQueue.js
@@ -631,8 +631,9 @@ var $$AnimateQueueProvider = ['$animateProvider', function($animateProvider) {
           if (!rootElementDetected) {
             parentHost = parentElement.data(NG_ANIMATE_PIN_DATA);
             if (parentHost) {
+              // The pin target element becomes the parent element
               parentElement = parentHost;
-              rootElementDetected = true;
+              rootElementDetected = isMatchingElement(parentElement, $rootElement);
             }
           }
         }

diff --git a/test/ngAnimate/animateSpec.js b/test/ngAnimate/animateSpec.js
@@ -1543,6 +1543,49 @@ describe("animations", function() {
       });
     });
 
+    they('should not animate an element when the pinned element (which is the $prop element), is pinned to an element that is not a child of the $rootElement',
+      ['same', 'parent', 'grandparent'],
+      function(elementRelation) {
+        inject(function($animate, $compile, $document, $rootElement, $rootScope) {
+
+        var pinElement, animateElement, pinTargetElement = jqLite('<div></div>');
+
+        var innerParent = jqLite('<div></div>');
+        jqLite($document[0].body).append(innerParent);
+        innerParent.append($rootElement);
+
+        switch (elementRelation) {
+          case 'same':
+            pinElement = jqLite('<div id="animate"></div>');
+            break;
+          case 'parent':
+            pinElement = jqLite('<div><div id="animate"></div></div>');
+            break;
+          case 'grandparent':
+            pinElement = jqLite('<div><div><div id="animate"></div></div></div>');
+            break;
+        }
+
+        // Append both the pin element and the pinTargetElement outside the app root
+        jqLite($document[0].body).append(pinElement);
+        jqLite($document[0].body).append(pinTargetElement);
+
+        animateElement = jqLite($document[0].getElementById('animate'));
+
+        $animate.addClass(animateElement, 'red');
+        $rootScope.$digest();
+        expect(capturedAnimation).toBeFalsy();
+
+        $animate.pin(pinElement, pinTargetElement);
+
+        $animate.addClass(animateElement, 'blue');
+        $rootScope.$digest();
+        expect(capturedAnimation).toBeFalsy();
+
+        dealoc(pinElement);
+      });
+    });
+
     it('should adhere to the disabled state of the hosted parent when an element is pinned',
       inject(function($animate, $compile, $document, $rootElement, $rootScope) {