在 AngularJS 应用中删除拖放（克隆）项目之间的 "data-binding"

Question

我正在使用 Sortable 库 (https://github.com/RubaXa/Sortable) 在两个列表（模型）之间创建拖放关系。为了清楚起见，我们将一个 SourceModel 和 DestinationModel 称为一个。

项目从 SourceModel 拉（和克隆）到 DestinationModel。放入 DestinationModel 的项目使用 ng-repeat 渲染（DestinationModel 中的 listItem 由 $index 跟踪），由 index.

跟踪

我遇到的问题是，当您克隆该项目时，任何生成的相同类型的克隆都是 "data-bound," 因此，由于我使用 contenteditable 来操作对象，因此所有对象同类型的被改变，包括原来的。（所以后面那个类型的拖也改了）

你可以在这里看到问题：

在这个会话期间拖入了两个顶部组件，当你改变一个时，你就同时改变了两个。但是，页面加载时已经存在的对象没有绑定，因此不会随着其他两个的变化而变化。

保存配置并刷新后，由于项目是按索引跟踪的，所以一切都独立正常。

我试过使用 Sortable 中的 onAdd() 回调来对添加的项目进行深度复制，但这没有用。

onAdd: function (e, c) {
    c = angular.copy(c);
},

我还尝试了 "cleansing" 删除后哈希键的模型，方法是通过以下函数强制数组：

model.cleanseStack = function() {
  stack = JSON.parse(angular.toJson(stack));
};

然而，我也不太幸运 - 对象仍然是绑定的。

我怎样才能确保我打破了对象之间存在的数据绑定。我仍然需要它在标记和模型之间独立绑定，但是，它们不应绑定在一起。

注意：我没有使用 jQuery。最多，我可以访问 jqlite 作为 AngularJS 框架的一部分。

Answer 1

这已在 Sortable 库中修复：

Removing the "data-binding" between drag and dropped (cloned) items in an AngularJS app