Question

我有一个指令，可以在拖放时克隆对象。

app.directive('ironplayDraggableBox', ['$compile', function($compile) {
  return {
    restrict:'A',
    link: function(scope, element, attrs) {
      $(element).draggable({
        connectToSortable: ".preview",
        helper: function(){
          $new_el = $(this).clone();
          return $compile($new_el)(scope);
        },
        handle: ".drag",
      });
    }
  };
}]);

但是当我用这样的HTML代码拖动DOM元素时

<input type="text" ng-model="align">{{align}}

ng-model完全停止工作。

你能否建议如何使用angular指令实现正确的dom元素克隆？

以下是完整代码：http://plnkr.co/edit/OJ1a5VyqQq9EpXP7AfpA?p=preview plunker的目标是让文本对齐选择工作。

Answer 1

问题是你的帮助器克隆不是最后放在HTML中的克隆。您可以从可排序元素的stop事件中获取最终元素，然后对其进行编译（您需要将$ compile注入该指令）：

stop: function(e, ui) {
  $compile(ui.item)(scope);
}

为了使模型生效，您还需要将h3从类更改为ng-class

<h3 ng-class="align" contenteditable="true">Hello</h3>

另请注意，您可以使用新范围创建可拖动元素，以便每个元素具有不同的状态。

选中plunker。

$（元素）.clone（）之后ng-model不起作用

1 个答案: