ngRepeat using directive with external template loses sync with model

[partap]

I have an app that receives asynchronous state updates via socketio, and displays in a custom directive using ngRepeat. Every now and then I'm getting weird display errors, where the new state is added onto the previous, rather than replacing it. I finally tracked the behavior down to the fact that the directive was using an external template (templateUrl).

I can reproduce it here:
http://plnkr.co/edit/qjMiXFyjUSUnllt8JfnQ?p=preview

The behavior is repeatable for every version of angular that I tried (1.0.5, 1.0.6, 1.1.3, 1.1.4)

My guess was that when we got two updates really fast, ngRepeat was creating and destroying the directives before it finished downloading the template, and the ajax handler for the directive was not removed so it still rendered after the directive had been destroyed...

However, in this plunk, It seems to do it no matter the size of the template or the delay between the updates, so I'm not sure what's going on. The only thing that makes it work is using an embedded template rather than templateUrl.

[btford]

As part of our effort to clean out old issues, this issue is being automatically closed since it has been inactivite for over two months.

Please try the newest versions of Angular (1.0.8 and 1.2.0-rc.1), and if the issue persists, comment below so we can discuss it.

Thanks!

[partap]

The issue persists. I just ran into it...

edit: oops, sorry, nevermind. :)
Different issue...

edit2: To further explain, I have switched to using embedded templates, injected using requirejs text! plugin...
However, 1.2.0-rc.1 breaks that... http://stackoverflow.com/questions/18276876/angularjs-1-2-include-template-in-repeat

I had to revert to 1.0.x...
Is there an open issue for this? if not, I can file one...

On Fri, Aug 23, 2013 at 6:34 PM, Brian Ford [email protected]:

As part of our effort to clean out old issues, this issue is being
automatically closed since it has been inactivite for over two months.

Please try the newest versions of Angular (1.0.8 and 1.2.0-rc.1), and if
the issue persists, comment below so we can discuss it.

Thanks!

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/2346#issuecomment-23198969
.

[btford]

Thanks for updating. Confirmed that this is an issue.

[partap]

Seems like both problems can be solved by simply moving the directive with the template down a level...out of the ng-repeat element.

http://plnkr.co/edit/qUWgJ18sMYSFYphyhHvj?p=preview

I'm thinking it's probably just a bad idea to attach more than one directive to an element anyhow...at least when one of them is ng-repeat. Maybe the docs should be updated to reflect that.

[duanemck]

I'm experiencing a similar problem but the work-around doesn't apply to me.

I have 2 tables where the rows can be dragged from 1 to the other. I have wrapped the jquery-ui sortable functionality in a directive that sits on the <tbody>. I also have a button on each row (1st <td> per row) that manually moves the item across (with an ng-click). The jquery-ui doesn't change the DOM, I just use it to get the user's intention and then move the item across in the controller (within a $scope.apply)

The ng-repeat is on the <tr>, and its the only directive on that element.

I haven't figured out how to reproduce the issue reliably, but it happens regularly that the DOM gets out of sync with the model.

[Narretz]

the original issue (at the least the trivial plnkr example) does work as expected in angular 1.2.8: http://plnkr.co/edit/F0PQjAwUGLbA9bQt6OaW?p=preview

[partap]

Yes, it looks like it works in 1.2.4 and up. I'll go ahead and close this issue.

[soluml]

I'm still suffering from a very similar issue regarding ng-repeat and jquery-ui sortables.

[Narretz]

Hey @SoLuMi you should probably open a new issue with a reproduction. Otherwise it'll probably get lost.