AngularJS中ngRepeat元素排序后出现异常行为问题求助

这个问题的核心是Sortable.js和AngularJS的数据流不匹配：Sortable是纯原生DOM操作工具，它只会移动页面上的DOM元素，但完全不会同步更新AngularJS $scope中的数组数据。而ng-repeat依赖数组的状态来维护视图和数据的双向绑定，当DOM顺序和数组顺序脱节时，ng-repeat的内部追踪机制就会彻底混乱，导致删除按钮绑定失效、视图异常消失等问题。

解决方案：让Sortable排序后同步更新$scope数组 #

我们需要在Sortable的配置中添加排序完成的回调，手动同步数组顺序，并触发Angular的脏检查，让视图和数据重新对齐。

步骤1：修改sortable指令的link函数

更新你的sortable指令，添加onEnd回调来同步数组：

app.directive("sortable", ["$timeout", function($timeout) {
  return {
    template: '<div class="sortable" ng-transclude></div>',
    transclude: true,
    scope: { 'handle': '@' },
    link: function(scope, element, attrs) {
      $timeout(function() {
        var sortableContainer = element.find('> div')[0];
        scope.sortable = Sortable.create(sortableContainer, {
          handle: scope.handle || null,
          // 排序完成后同步数组
          onEnd: function(evt) {
            // 从父作用域拿到当前box的items数组
            var targetArray = scope.$parent.box.items;
            // 移动数组元素，和DOM顺序保持一致
            var movedItem = targetArray.splice(evt.oldIndex, 1)[0];
            targetArray.splice(evt.newIndex, 0, movedItem);
            // 手动触发Angular脏检查（Sortable回调在Angular上下文外）
            scope.$apply();
          }
        });
      });
    }
  };
}]);

步骤2：优化ng-repeat的追踪机制（可选但推荐）

为了进一步避免索引追踪导致的绑定问题，给ng-repeat添加track by，让Angular基于元素的唯一标识追踪，而不是默认的数组索引：

<div class="item" ng-repeat="item in box.items track by item.index">
  {{item.index }}) {{ item.name }}
  <div class="options">
    <span ng-click="removeBoxItem(box, item)" class="delete">[X]</span>
    <span class="handle">[^]</span>
  </div>
</div>

为什么这样能解决问题？ #

1. 同步数组与DOM：Sortable的onEnd回调会在排序完成后触发，我们通过evt.oldIndex和evt.newIndex手动调整$scope中的数组顺序，让数据和视图完全匹配。
2. 触发脏检查：因为Sortable的回调函数运行在Angular的digest循环之外，必须调用scope.$apply()通知Angular数据已更新，重新建立绑定关系。
3. 稳定的追踪机制：track by让ng-repeat不再依赖数组索引来识别元素，即使数组顺序变化，也能正确关联每个item的绑定事件。

经过这两处修改，你会发现排序后删除按钮依然正常工作，真实项目中“视图消失但数组存在”的问题也会彻底解决——因为现在DOM和$scope数组始终保持同步，Angular能正确追踪每个元素的状态。

内容的提问来源于stack exchange，提问作者Karnov