如何将Angular Directive设置为在Javascript中创建的DOM元素

How to Set Angular Directive to the DOM element created in Javascript

本文关键字：Javascript 创建 元素 DOM Angular Directive 设置      更新时间：2023-09-26

我有一个指令，它允许拖放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);

指令在这种情况下不起作用！

问题出在哪里？

我做错了什么？

谢谢！

在将要创建的元素附加到DOM:之前，需要先将其$compile

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

这里有一个类似问题的答案。

不能仅将指令添加为HTML节点。因为通过这种方式，您将jquery/javascript与AngularJS混合在一起。当您添加一个新元素时，AngularJS无法知道它已经被添加。您可以使用$compile服务来编译HTML元素，以便AngularJS实际执行您的指令。

请参阅：在AngularJS 中动态添加指令

相关文章：