From 996a46f2ba542e651fb553450f302c014a57ea98 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matias=20Niemel=C3=A4?= Date: Wed, 12 Mar 2014 15:24:22 -0400 Subject: [PATCH] fix($animate): insert elements at the start of the parent container instead of at the end With 1.2.x, $animate.enter and $animate.move both insert the element at the end of the provided parent container element when only the parent element is provided. If an after element is provided then they will place the inserted element after that one. This works fine, but there is no way to place an item at the top of the provided parent container using both these functions. Closes #4934 Closes #6275 BREAKING CHANGE: $animate will no longer default the after parameter to the last element of the parent container. Instead, when after is not specified, the new element will be inserted as the first child of the parent container. To update existing code change any instances of $animate.enter() or $animate.move() from: `$animate.enter(element, parent);` to: `$animate.enter(element, parent, angular.element(parent[0].lastChild));` --- src/ng/animate.js | 16 ++++++---------- test/ng/animateSpec.js | 13 +++++++++++++ 2 files changed, 19 insertions(+), 10 deletions(-) diff --git a/src/ng/animate.js b/src/ng/animate.js index 785d1dfa1d1f..34f20f004025 100644 --- a/src/ng/animate.js +++ b/src/ng/animate.js @@ -111,8 +111,9 @@ var $AnimateProvider = ['$provide', function($provide) { * @ngdoc method * @name $animate#enter * @function - * @description Inserts the element into the DOM either after the `after` element or within - * the `parent` element. Once complete, the done() callback will be fired (if provided). + * @description Inserts the element into the DOM either after the `after` element or + * as the first child within the `parent` element. Once complete, the done() callback + * will be fired (if provided). * @param {DOMElement} element the element which will be inserted into the DOM * @param {DOMElement} parent the parent element which will append the element as * a child (if the after element is not present) @@ -122,14 +123,9 @@ var $AnimateProvider = ['$provide', function($provide) { * inserted into the DOM */ enter : function(element, parent, after, done) { - if (after) { - after.after(element); - } else { - if (!parent || !parent[0]) { - parent = after.parent(); - } - parent.append(element); - } + after + ? after.after(element) + : parent.prepend(element); async(done); }, diff --git a/test/ng/animateSpec.js b/test/ng/animateSpec.js index e982862aed60..b9dd1493330e 100644 --- a/test/ng/animateSpec.js +++ b/test/ng/animateSpec.js @@ -15,6 +15,19 @@ describe("$animate", function() { expect(element.contents().length).toBe(1); })); + it("should enter the element to the start of the parent container", + inject(function($animate, $compile, $rootScope) { + + for(var i = 0; i < 5; i++) { + element.append(jqLite('
' + i + '
')); + } + + var child = jqLite('
first
'); + $animate.enter(child, element); + + expect(element.text()).toEqual('first 0 1 2 3 4'); + })); + it("should remove the element at the end of leave animation", inject(function($animate, $compile, $rootScope) { var child = $compile('
')($rootScope); element.append(child);