Skip to content

Commit 6b36689

Browse files
committed
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
1 parent 0e34733 commit 6b36689

File tree

2 files changed

+39
-3
lines changed

2 files changed

+39
-3
lines changed

src/ng/directive/ngRepeat.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -379,7 +379,7 @@ var ngRepeatDirective = ['$parse', '$animate', function($parse, $animate) {
379379
block = lastBlockMap[blockKey];
380380
elementsToRemove = getBlockNodes(block.clone);
381381
$animate.leave(elementsToRemove);
382-
if (elementsToRemove[0].parent) {
382+
if (elementsToRemove[0].parentNode) {
383383
// if the element was not removed yet because of pending animation, mark it as deleted
384384
// so that we can ignore it later
385385
for (index = 0, length = elementsToRemove.length; index < length; index++) {

test/ng/directive/ngRepeatSpec.js

+38-2
Original file line numberDiff line numberDiff line change
@@ -1364,6 +1364,7 @@ describe('ngRepeat animations', function() {
13641364
return element;
13651365
}
13661366

1367+
beforeEach(module('ngAnimate'));
13671368
beforeEach(module('ngAnimateMock'));
13681369

13691370
beforeEach(module(function() {
@@ -1376,8 +1377,7 @@ describe('ngRepeat animations', function() {
13761377
}));
13771378

13781379
afterEach(function(){
1379-
dealoc(body);
1380-
dealoc(element);
1380+
body.empty();
13811381
});
13821382

13831383
it('should fire off the enter animation',
@@ -1445,6 +1445,42 @@ describe('ngRepeat animations', function() {
14451445
expect(item.element.text()).toBe('2');
14461446
}));
14471447

1448+
it('should not change the position of the block that is being animated away via a leave animation',
1449+
inject(function($compile, $rootScope, $animate, $document, $window, $sniffer, $timeout) {
1450+
if (!$sniffer.transitions) return;
1451+
1452+
var item;
1453+
var ss = createMockStyleSheet($document, $window);
1454+
1455+
try {
1456+
1457+
$animate.enabled(true);
1458+
1459+
ss.addRule('.animate-me div',
1460+
'-webkit-transition:1s linear all; transition:1s linear all;');
1461+
1462+
element = $compile(html('<div class="animate-me">' +
1463+
'<div ng-repeat="item in items">{{ item }}</div>' +
1464+
'</div>'))($rootScope);
1465+
1466+
$rootScope.items = ['1','2','3'];
1467+
$rootScope.$digest();
1468+
expect(element.text()).toBe('123');
1469+
1470+
$rootScope.items = ['1','3'];
1471+
$rootScope.$digest();
1472+
1473+
expect(element.text()).toBe('123'); // the original order should be preserved
1474+
$animate.triggerReflow();
1475+
$timeout.flush(1500); // 1s * 1.5 closing buffer
1476+
expect(element.text()).toBe('13');
1477+
1478+
} finally {
1479+
ss.destroy();
1480+
}
1481+
})
1482+
);
1483+
14481484
it('should fire off the move animation',
14491485
inject(function($compile, $rootScope, $animate) {
14501486

0 commit comments

Comments
 (0)