如何將Angular Directive設置為Javascript中創建的DOM元素

Question

我有一個指令，允許拖放Dom元素，即：

JS：

  angular.module('animationApp').directive('myDraggable', ['$document', function($document){return{link: function(scope, element, attr) {
  var startX = 0, startY = 0, x = 0, y = 0;
  console.log("In myDraggable directive code");
  element.css({
   position: 'relative',
   cursor: 'pointer'
  });
  element.on('mousedown', function(event) {
    // Prevent default dragging of selected content
    event.preventDefault();
    startX = event.pageX - x;
    startY = event.pageY - y;
    $document.on('mousemove', mousemove);
    $document.on('mouseup', mouseup);
  });
  function mousemove(event) {
    y = event.pageY - startY;
    x = event.pageX - startX;
    element.css({
      top: y + 'px',
      left:  x + 'px'
    });
  }
  function mouseup() {
    $document.off('mousemove', mousemove);
    $document.off('mouseup', mouseup);
  }
}};}]);

現在，我可以使用它，並且當我在HTML頁面上創建DOM元素並分配特定指令時，它可以很好地工作（拖放功能）。 喜歡 ，

HTML：

<div my-draggable = "">Hello</div>
<div my-draggable = "">Sid</div>

問題是，我無法將指令分配給我在Javascript代碼中創建的那些元素。 喜歡，

JS：

var tempView = document.getElementById('ngView');
var div = document.createElement("div");
var t = document.createTextNode("This is a paragraph.");
div.appendChild(t);
div.setAttribute("my-draggable","");
tempView.appendChild(div);

該指令在這種情況下不起作用！

問題是什么 ？

我做錯了什么 ？

謝謝！

Answer 1

您需要先對要創建的元素進行$compile ，然后再將其附加到DOM：

div.setAttribute("my-draggable","");
$compile(div)($scope)
tempView.appendChild(div);

有一個答案，類似的問題在這里 。

Answer 2

您不能僅將指令添加為HTML節點。 因為這樣，您將jquery / javascript與AngularJS混合使用。 當您添加新元素時，AngularJS無法知道已添加該元素。 您可以使用$ compile服務來編譯HTML元素，以便AngularJS實際執行您的指令。

請參見： AngularJS中的動態添加指令