吳重複不更新陣列變化

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％的時間，但是修復它。

僅供參考：我改變了可排序的功能，但它做的和以前一樣。