Angular 可排序事件的工作方式与使用 JQuery 不同

Question

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

“所有 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 版本不同？ drop后如何找到索引？

（我还注意到包含选项在 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()); 
       });

    }
};