Sunday, March 31, 2013

NetFlix queue style list reordering using AngularJS

Looking at the code you will see that it was kind of difficult to implement this. I ran into several issues with ng-repeat, it's scope, child isolated scopes and $scope.$broadcast and so on. I will blog about those some other time.

This is implemented a reorder directive (which introduces it's own 'isolate' scope) that must wrap the content inside ng-repeat. The reorder directive itself transcludes [1] the contents. As noted above the reorder directive introduces an 'isolate' scope...which may affect some assumptions made by other included content about the $parent scope. I may have to solve it differently.

In any case, here is the demo:


Well, drag and drop reordering is probably a better and direct UI paradigm for this kind of stuff. But this is accessible.

No comments: