javascript - Angular Sortable 事件的工作方式与使用 JQuery 不同

Question

我发现 JQuery Sortable 和 Angular Sortable 的可排序事件存在差异，尽管我的理解是 Angular 事件和选项应与 JQuery 相同:

“所有 jQueryUI 可排序选项都可以通过指令传递。” https://github.com/angular-ui/ui-sortable

下面显示了一个 jquery 可排序的。当拖放某个项目时，警报会显示该项目在被拖放后的索引。 http://jsfiddle.net/L7jemdbh/

$(".sort-list-horizontal").sortable({containment: 'parent', tolerance: "pointer" })
    .on( "sortupdate", function( event, ui ) { alert(ui.item.index()); } );

使用 Angular 的相同可排序具有相同的警报，但它会在删除项目之前显示项目的索引。 http://jsfiddle.net/zobgawqt/

$scope.sortableOptions = {
    tolerance: 'pointer',
    update: function(event, ui) { alert(ui.item.index()); }
};    

为什么 Angular 版本不同？掉落后如何找到索引？

(我还注意到包含选项在 jquery 版本中有效，但在 Angular 版本中无效，因此我将其关闭)

Answer 1

我不知道 Angular Sortable 如何处理事件更新，但确保在 AngularJS 中调用所有更新时运行程序的一种方法是将其包装在 $timeout 中。

<强> FORKED FIDDLE

更改:

$scope.sortableOptions = {
    tolerance: 'pointer',
    update: function(event, ui) { alert(ui.item.index()); }
}; 

至

$scope.sortableOptions = {
    tolerance: 'pointer',
    update: function(event, ui) { 
       $timeout(function(){
          alert(ui.item.index()); 
       });

    }
};