AngularJS $compile with jQuery clone()答案

【问题标题】：AngularJS $compile with jQuery clone()AngularJS $compile with jQuery clone()
【发布时间】：2015-08-20 12:40:02
【问题描述】：

我知道这并不理想，但我在 AngularJS 构建中使用了 jQuery UI Draggable、Droppable 和 Resizable。

我的 Draggable 使用 clone helper option，因此我需要在将 Draggable 放入 Droppable 元素后复制它。

为此，我使用以下代码。

$formContainer.droppable({
     'drop' : function (event, ui) {

          var clone = ui.helper.clone();

          clone.draggable({ /* ... */ });

          clone.resizable({ /* ... */ });

          clone.appendTo('#form-container');

     }
});

这很好用，直到我需要在 Draggable 中使用 ng-click。

问题： 使用$compile 和var clone 的值的优雅模式是什么，以便在我添加新元素后ng-click 等仍然有效?

我是否坚持手动将 HTML 字符串传递给 $compile，然后手动更新从 Draggable 插件添加到原始元素的内联样式/数据/类属性？

【问题讨论】：

尝试使用 $compile(clone)(scope) 编译克隆
@Jugnu 是的，我试过了。没有运气。不过感谢您的建议！
你能提供fiddle或plunker吗？

标签： jquery angularjs jquery-ui compilation

【解决方案1】：

@Jugnu：感谢您花时间看我的问题。我能够用我认为更多的“角度”方法（使用数据绑定和指令）而不是“jQuery”方法（使用.append() 方法手动将元素添加到 DOM）来解决这个问题。

这里有一个关于如何让一切正常工作的小提琴：http://jsfiddle.net/1knfywzr/

当我放下可拖动对象时，我会提取所需的数据并将其存储在一个数组中。然后我使用ng-repeat 循环遍历数组并将指令附加到文档。然后指令使用我之前提取的数据来定位/调整新的可拖动对象。

我对这种方法感到非常满意，因为它似乎比我最初的想法更有条理，但我很高兴其他人分享他们的想法。

【讨论】：