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

【问题标题】：ng-model does not work after $(element).clone()ng-model 在 $(element).clone() 之后不起作用
【发布时间】：2015-03-29 07:41:48
【问题描述】：

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

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

【问题讨论】：

标签： javascript angularjs jquery-ui drag-and-drop angularjs-ng-model

【解决方案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。

【讨论】：