Skip to content
This repository has been archived by the owner on Apr 12, 2024. It is now read-only.

Commit

Permalink
fix($animate): insert elements at the start of the parent container i…
Browse files Browse the repository at this point in the history
…nstead 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 these two APIs.

With this change, if the `after` argument is not specified for either `$animate.enter` or `$animate.move`,
the new child element will be inserted into the first position of the parent container element.

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 all instances of `$animate.enter()` or `$animate.move()` from:

`$animate.enter(element, parent);`

to:

`$animate.enter(element, parent, angular.element(parent[0].lastChild));`
  • Loading branch information
matsko committed Apr 3, 2014
1 parent c67bd69 commit 1cb8584
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 10 deletions.
16 changes: 6 additions & 10 deletions src/ng/animate.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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);
},

Expand Down
13 changes: 13 additions & 0 deletions test/ng/animateSpec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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('<div> ' + i + '</div>'));
}

var child = jqLite('<div>first</div>');
$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('<div></div>')($rootScope);
element.append(child);
Expand Down

0 comments on commit 1cb8584

Please sign in to comment.