吴重复不更新阵列变化

Question

我已经查看了这个问题很多小时，并阅读了许多其他问题，看起来完全相同，我已经尝试了他们的每一个解决方案，但似乎没有工作。

我有对象（instructionObj.instructions）的数组，这些对象得到重复ng-repeat和他们的模板是一个指令。

<div instruction-directive ng-repeat="i in instructionsObj.instructions"> </div> 

然后我允许使用Jquery UI排序来排序项目。

var first, second; 
$(".sort").sortable({ 
    axis: "y", 
    start: function(event, ui) { 
     first = ui.item.index(); 
    }, 
    stop: function(event, ui) { 
     second = ui.item.index(); 
     console.log(first + " " + second); 
     rearrange(first, second); 
     $scope.$apply(); 
    } 
}); 

我再接入移动物体的开始和结束索引，并相应地重新排列数组：

function rearrange(f, s){ 
    $timeout(function() { 
     $scope.instructionsObj.instructions.splice(s, 0, 
      $scope.instructionsObj.instructions.splice(f, 1)[0]); 
     $scope.$apply(); 
    }); 
} 

所有这一切的伟大工程的大部分时间。我发现失败的一种情况是在重新排列对象时（一列是屏幕上显示的所有对象的当前位置）：

a | b | c | d | a

b | c | d | c | b

c | d | b | b | d

d | a | a | a | c

最后一步应该是a，d，c，b。但它变成a，b，d，c。

然而，当我回到我以前的观点，回来了正确的配置显示，一切都很好。正如你可以看到我已经尝试$timeout和$apply()和许多其他的东西，但似乎没有工作。

我知道这是一个DOM更新问题，因为我可以记录数组，并且看到它与DOM显示的内容（不正确）不同（正确）。任何帮助，将不胜感激。

更新：

我即使使用 <pre ng-bind="instructionsObj.instructions|json</pre>来显示阵列的精确布局，这是总是正确

。我的心被炸毁了。

Answer 1

幸运的是，我找到了一个解决方案，尽管我不明白为什么问题仍在发生。

在此JS：

sortableEle = $('.sort').sortable({ 
    start: $scope.dragStart, 
    update: $scope.dragEnd 
}); 

$scope.dragStart = function(e, ui) { 
    ui.item.data('start', ui.item.index()); 
} 
$scope.dragEnd = function(e, ui) { 
    var start = ui.item.data('start'), 
     end = ui.item.index(); 

    $scope.instructionsObj.instructions.splice(end, 0, 
     $scope.instructionsObj.instructions.splice(start, 1)[0]); 
    currentRecipe.setInstructions($scope.instructionsObj.instructions); 
    $scope.$apply(); 
    sortableEle.refresh(); 
} 

我需要改变阵列之后调用$scope.$apply()以及作为sortableEle.refresh()。

再说一遍，我不明白为什么它会占用10％的时间，但是修复它。

仅供参考：我改变了可排序的功能，但它做的和以前一样。