javascript - 在 AngularJS 中放置 $.draggable() 后，如何从模型中删除？

Question

我有两个 AngularJS Controller 、一个用户列表和一个垃圾箱区域。

这个想法是，您可以将用户从 List 拖到 Trash 中，List Controller 将从其列表中删除该用户。 $scope.users 数组模型。

我已经很接近了，我只是不知道如何发送 user 对象以从 $scope.users[] 中删除。

我这里有一个正在运行的 JSBin:(出于某种原因，当我的浏览器分辨率为 1920x1080 时它不起作用；如果你将浏览器缩小一点它应该可以工作......奇怪)

http://jsbin.com/uMUfejeP/3/edit

如您所见，它调用了list.deleteMe()函数，但我不知道如何发送要删除的对象。我尝试使用 ngValue 但这似乎没有多大作用。

有人知道如何解决这个问题吗？

提前致谢!

Answer 1

由于您使用的是 jqueryUI，因此您可以利用 droppable API ，特别是 drop 事件。

element.droppable({
  //...
  drop: function(event, ui) {
     // handle the drop
  }
  //...
});

一种方法(不一定是最佳方法)是使用 ui 参数的 draggable 属性。

drop: function(event, ui) {
  // this is how you get an angular scope from an element
  var friendScope = angular.element(ui.draggable).scope()
  // now, friendScope.friend is the friend you want to delete
}

这样做的问题是，你开始真正把问题纠缠在一起，但这应该会让你摆脱眼前的困境。

这是您的jsbin ，重构为拥有 Friends 服务和 Trash 服务，并使用这种方法。

最好将拖放功能包装在自己的模块中，并公开一些指令 API 来使用它。快速谷歌搜索“Angular 拖放”产生this project等，就是这样做的。