Ng-repeat 不随数组更改而更新

Question

我已经研究了这个问题好几个小时，并阅读了许多其他看起来完全一样的问题，我尝试了他们的每一个解决方案，但似乎都没有奏效。

我有一个对象数组 (instructionObj.instructions)，这些对象与 ng-repeat 重复，它们的模板是一个指令。

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

然后我允许使用 Jquery UI sortable 对项目进行排序。

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();
    });
}

所有这些在大多数情况下都很有效。我发现失败的一种情况是重新排列对象时（一列是屏幕上显示的所有对象的当前位置）：

一个 |乙 | c | d |一个

b | c | d | c | b

c | d |乙 |乙 | d

d |一个 |一个 |一个 | 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% 的时间里搞砸，但它修复了它。

仅供参考：我稍微改变了 sortable 函数，但它的作用与以前完全相同。