AngularJS 中的 $.draggable() 删除后如何从模型中删除？答案

【问题标题】：How can I remove from a model after a $.draggable() drop in AngularJS?AngularJS 中的 $.draggable() 删除后如何从模型中删除？
【发布时间】：2014-01-16 05:56:39
【问题描述】：

我有两个 AngularJS 控制器，一个List 用户和一个Trash 区域。

这个想法是，您可以将用户从 List 拖到 Trash 中，然后 List 控制器将从其 $scope.users 数组模型中删除该用户。

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

我在这里有一个可以工作的 JSBin：（由于某种原因，当我的浏览器为 1920x1080 时，它不起作用；如果你把浏览器缩小一点，它应该可以工作.. 很奇怪）

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

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

有人知道怎么解决吗？

提前致谢！

【问题讨论】：

标签： javascript jquery jquery-ui angularjs

【解决方案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。在谷歌上快速搜索“角度拖放”得到了 this project 等，就是这样做的。

【讨论】：

非常感谢；效果很好。你有什么理由将service 和directives 与angular.module() 函数一起编写，而不是像我以前那样作为单独的函数分解？我经常看到这种编写 Angular 的方式，并且想知道它有多标准。另外，感谢您向我展示了 angular.element.scope() 函数，这似乎非常有用。无论哪种方式，我都会研究您的 jsbin 并以这种方式重构我的项目。感谢您的宝贵时间和高质量的回复。
如果我真的想重构代码，我也会将控制器放入模块中。作为一般的经验法则，将所有内容放入一个模块中 - 它可以保持全局命名空间清晰，并且可以更好地了解事物的来源。你仍然可以在语法上把事情分开：var app = angular.module('app', []); 然后app.controller(..), app.directive(..), etc.。
非常感谢您的解释！

【解决方案2】：

我最终做的只是发回user.user_id 并搜索具有相同id 的User 对象。似乎效率有点低；我很想发回对 User 对象的引用并将其从数组中删除。

如果有人知道如何做到这一点，我会接受他们的回答而不是我自己的。

【讨论】：