fix(ngRepeat): preserve original position of elements that are being …

…animated away During the recent refactoring a typo was made that broke code that detects if we are already removed from the DOM (animation has completed). Closes angular#8918 Closes angular#8994
ibrahim87 · Sep 9, 2014 · ed63733 · ed63733
1 parent f33a938
commit ed63733
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 3 deletions.
diff --git a/src/ng/directive/ngRepeat.js b/src/ng/directive/ngRepeat.js
@@ -379,7 +379,7 @@ var ngRepeatDirective = ['$parse', '$animate', function($parse, $animate) {
             block = lastBlockMap[blockKey];
             elementsToRemove = getBlockNodes(block.clone);
             $animate.leave(elementsToRemove);
-            if (elementsToRemove[0].parent) {
+            if (elementsToRemove[0].parentNode) {
               // if the element was not removed yet because of pending animation, mark it as deleted
               // so that we can ignore it later
               for (index = 0, length = elementsToRemove.length; index < length; index++) {

diff --git a/test/ng/directive/ngRepeatSpec.js b/test/ng/directive/ngRepeatSpec.js
@@ -1365,6 +1365,7 @@ describe('ngRepeat animations', function() {
     return element;
   }
 
+  beforeEach(module('ngAnimate'));
   beforeEach(module('ngAnimateMock'));
 
   beforeEach(module(function() {
@@ -1377,8 +1378,7 @@ describe('ngRepeat animations', function() {
   }));
 
   afterEach(function(){
-    dealoc(body);
-    dealoc(element);
+    body.empty();
   });
 
   it('should fire off the enter animation',
@@ -1446,6 +1446,42 @@ describe('ngRepeat animations', function() {
     expect(item.element.text()).toBe('2');
   }));
 
+  it('should not change the position of the block that is being animated away via a leave animation',
+    inject(function($compile, $rootScope, $animate, $document, $window, $sniffer, $timeout) {
+      if (!$sniffer.transitions) return;
+
+      var item;
+      var ss = createMockStyleSheet($document, $window);
+
+      try {
+
+        $animate.enabled(true);
+
+        ss.addRule('.animate-me div',
+                      '-webkit-transition:1s linear all; transition:1s linear all;');
+
+        element = $compile(html('<div class="animate-me">' +
+                                  '<div ng-repeat="item in items">{{ item }}</div>' +
+                                '</div>'))($rootScope);
+
+        $rootScope.items = ['1','2','3'];
+        $rootScope.$digest();
+        expect(element.text()).toBe('123');
+
+        $rootScope.items = ['1','3'];
+        $rootScope.$digest();
+
+        expect(element.text()).toBe('123'); // the original order should be preserved
+        $animate.triggerReflow();
+        $timeout.flush(1500); // 1s * 1.5 closing buffer
+        expect(element.text()).toBe('13');
+
+      } finally {
+        ss.destroy();
+      }
+    })
+  );
+
   it('should fire off the move animation',
     inject(function($compile, $rootScope, $animate) {