Angular：捕获拖放事件答案

【问题标题】：Angular: Catch Drag and Drop eventAngular：捕获拖放事件
【发布时间】：2014-05-28 20:44:39
【问题描述】：

我使用 angular-ui 来获取可以通过“拖放”进行排序的列表，效果很好。

就像这样（工作正常）：

index.html

<ul ui-sortable ng-model="list">
    <li ng-repeat="item in list" class="item">{{item}}</li>
</ul>

app.js

var myapp = angular.module('myapp', ['ui.sortable']);

myapp.controller('controller', function ($scope) {
    $scope.list = ["one", "two", "three", "four", "five", "six"];
});

现在，我需要知道列表（这种行为可能是很多列表）何时更改，我尝试了drop, dropend, drag, ...，但没有得到它。

这是我的代码http://jsfiddle.net/9sueU/4/

我需要它来处理 multiples 列表，例如这里 http://jsfiddle.net/b5nqd/1/

【问题讨论】：

标签： jquery angularjs drag-and-drop event-handling dom-events

【解决方案1】：

在对列表进行排序时，angular-ui 会直接更改数组顺序。您可以使用$scope.$watch 来监听您的list 数组的更改事件。

$scope.$watch("list", function (value) {
    console.log("Changed !", value);
}, true);

您需要将第三个参数作为 true 传递，以强制 Angular 使用 angular.equals 而不是基本引用相等来验证更改。确实，数组引用并没有改变，它仍然是同一个数组，但是它的内容被修改了，所以只有angular.equals可以区分两者。

【讨论】：

这不如 Angular 的 $watchCollection 高效，后者专为这类场景设计，但确实有效
我需要它来处理像这里 jsfiddle.net/b5nqd/1 这样的倍数列表，我可以用 '$watch' 得到它吗？
@GuillaumeBesson 你能编辑你的答案来解释它是如何工作的吗？例如这里jsfiddle.net/b5nqd/1
太好了，我花了一整天的时间寻找它。但如果我有lists=[{list:["one", "two", "three", "four", "five", "six"]:OTHER:"OTHER"},...]，它也会在OTHER 更改时捕捉到。
您可以传递一个函数作为 $watch 的第一个参数来返回 AngularJS 需要监视的元素，这是一个工作示例：jsfiddle.net/b5nqd/4。

【解决方案2】：

您需要观察集合的变化。即使订单发生变化，Angular 也会通知您

$scope.$watchCollection('list', function (newVal, oldVal) {
    // DO something
});

我已经更新了你的小提琴here

【讨论】：

看起来不错，但我需要为倍数列表工作，比如这里 jsfiddle.net/b5nqd/1
现在情况不同了。您正在处理多个集合，因此您需要分别观看每个集合。尝试使用angular.forEach 并针对主列表中的每个数组，观察该集合。或者正如 Besson 在他的回答中建议的那样，尝试使用 true 作为普通 $watch 上的第三个参数。（如果数据量很大，它会减慢速度。）
angular.forEach ？我该如何使用它？你能编辑你的答案来解释吗？