While I was looking into an issue I was having with ng-repeats in the ui-sortable directive, which I later found was the same issue as this (https://github.com/angular-ui/ui-sortable/issues/2), I came across another issue regarding the scope of the ui-sortable directive.
If you look at this fiddle: http://jsfiddle.net/hKYWr/707/
Please open your console, and you'll notice that when you start and stop the drag, you'll see a "start" and "stop" in your console.
However, when you introduce a second ui-sortable section with different options, it overrides the events of the first one (or vice versa). You will notice that the "stop" no longer gets called by the first set of colors: http://jsfiddle.net/hKYWr/708/
While stepping through the angular-ui.js file, these are the lines that cause problems:
// If user provided 'start' callback compose it with onStart function
_start = opts.start;
opts.start = function(e, ui) {
onStart(e, ui);
if (typeof _start === "function")
_start(e, ui);
};
// If user provided 'start' callback compose it with onStart function
_stop = opts.stop;
opts.stop = function(e, ui) {
onStop(e, ui);
if (typeof _stop === "function")
_stop(e, ui);
};
// If user provided 'update' callback compose it with onUpdate function
_update = opts.update;
opts.update = function(e, ui) {
onUpdate(e, ui);
if (typeof _update === "function")
_update(e, ui);
};
the _stop seems to get overwritten with "undefined" from whichever ui-sortable gets called last.
Does anyone how to handle multiple ui-sortable elements on the same page? Please let me know if I am doing something wrong, thanks in advance!