Question

我有一个sortable-wrapper指令，允许将列表中的项目和列表中的项目移动到另一个列表。

使用数组容器：

$scope.container = [
  [{id: '1.1'}, {id: '1.2'}, {id: '1.3'}],
  [{id: '2.1'}, {id: '2.2'}, {id: '2.3'}]
]

我使用这样的指令：

<div ng-repeat="array in container">
  <ul sortable>
    <li ng-repeat="item in array">{{ item.id }}</li>
  </ul> 
</div>

当一个项目被放入一个列表时，我必须更新项目后端并插入后端返回的移动项目在右侧数组/索引：

$scope.move = function (from, fromIndex, to, toIndex) {
  $http.post(url, data).success(function(movedItem) {
    from.splice(fromIndex, 1)[0];
    to.splice(toIndex, 0, movedItem);
  });
}

该指令在版本1.2.0-rc.2之前运行良好，因为1.2.0-rc.3我在移动项目时遇到此错误：

TypeError: Cannot call method 'insertBefore' of null
    at http://code.angularjs.org/1.2.1/angular.js:3857:22
    at forEach (http://code.angularjs.org/1.2.1/angular.js:303:18)
    at Object.enter (http://code.angularjs.org/1.2.1/angular.js:3856:9)
    at http://code.angularjs.org/1.2.1/angular.js:18828:26
    at publicLinkFn (http://code.angularjs.org/1.2.1/angular.js:5443:29)
    at boundTranscludeFn (http://code.angularjs.org/1.2.1/angular.js:5555:21)
    at controllersBoundTransclude (http://code.angularjs.org/1.2.1/angular.js:6145:18)
    at ngRepeatAction (http://code.angularjs.org/1.2.1/angular.js:18826:15)
    at Object.$watchCollectionAction [as fn] (http://code.angularjs.org/1.2.1/angular.js:11347:11)
    at Scope.$digest (http://code.angularjs.org/1.2.1/angular.js:11443:27)

这是一个重现错误的plunker：http://plnkr.co/edit/bAD8z2KdW34a7hkhdyiu?p=preview

有什么想法吗？

Answer 1

使用此：

<li ng-repeat="item in array track by item.id">{{ item.id }}</li>

为什么？

我认为一旦他们的位置发生变化，你就会重新创建项目（getNewItemFromBackend(item)）。因为ngRepeat通过对象相等性跟踪它们，所以一旦对象离开列表，Angular就无法找到它来插入DOM元素。我对这个解释并不是100％满意，但它大致正是如此。

Answer 2

最后，我更改了我的实现以使用angular-ui ui-sortable模块。 The angular 1.2 branch考虑了1.2版本的ng-repeat指令的变化。请参阅pull request。

迁移到AngularJS 1.2会破坏sortable-wrapper指令

2 个答案: