ng-model 在 $(element).clone() 之后不起作用

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 的目标是让文本对齐 select 工作。

Answer 1

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

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

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

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

另请注意，您可以创建具有新范围的可拖动元素，这样每个元素都会有不同的状态。

检查此 plunker。