1

我有一个在拖放时克隆对象的指令。

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完全停止工作。

您能否建议如何使用内部的角度指令实现正确的 dom 元素克隆？

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

4

1 回答 1

2

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

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

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

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

Also notice you can create your draggable element with a new scope so each one will have a different state.

Check this plunker.

于 2015-03-29T09:27:46.420 回答