Digest ng-repeat after manual DOM manipulation causes disorganized list

[XavierBoubert]

I'm using AngularJS 1.2.16.

1. I have made 3 ng-repeat wrapped into each other based on $scope object
2. With a button I move one of the last ng-repeat list element after the last element in jQuery, not within a Digest
3. With another button I reverse all $scope elements in last ng-repeat list then Digest is fired.

After that, I expecting to have all the initial elements in reverse order in my view. But I have a disorganized elements list.

Here is a demo to try: http://jsfiddle.net/xavierboubert/4AvQG/8/
Look at the list of Items, click "Modif DOM please" then click "Reverse please".

(In a real project, I'm using jQuery UI with a customized sortable with multiple elements)

[kamilkp]

My PR #6016 fixes this issue.

[XavierBoubert]

I see that, so cool. Do you know if your patch is going to be merged with master?

[kamilkp]

Unfortunately after two months I've lost any hope that this will get merged, despite the fact that it looks like the community would be grateful for that PR :(.
I have to use a custom-built angularjs from my fork in my projects.

[ghost]

@kamilkp your PR should fix #7318 too ?

[kamilkp]

I guess. But I don't think it's going to be merged into angular. You can use my fork if you'd like.

[mebibou]

👍

[btford]

@kamilkp although your patch fixes this once case in the short term, I think it's a poor solution long-term. Igor wrote a bit about it here, but to re-iterate:

In Angular, a DOM node should only have one "owner" that can move or remove it. It doesn't make sense to be able to reorder or remove nodes created by ngRepeat. It totally breaks the semantics of data-binding. What should happen if you move some compiled DOM out of ngRepeat bound to an array, and then the associated array element is deleted from the array? What should happen to the detached node if the array is sorted?

In short, modifying the DOM like this will result in code that's difficult to reason about, fragile, and prone to memory leaks.

What you should do is write (or use) a directive that owns the entire drag/drop part of your UI. It's a bit more work, but you'll save yourself a lot of headache long-term.

Closing this since this is not behavior we want to support.

[kamilkp]

Thanks for your reply Brian. I actually realized that and recently wrote a directive(s) for that. It is completely declarative and doesn't depend on jQuery so it's not yet another attempt to make a jQuery plugin work with angular. You can chceck it out if you like angular-sortable-view