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

Posted 2023-02-22

【中文标题】如何将 Angular 指令设置为在 Javascript 中创建的 DOM 元素

【英文标题】：How to Set Angular Directive to the DOM element created in Javascript

【发布时间】：2016-12-08 04:59:29

【问题描述】：

我有一个允许拖放 Dom 元素的指令：

JS：

  angular.module('animationApp').directive('myDraggable', ['$document', function($document)returnlink: 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);

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

有什么问题？

我做错了什么？

谢谢！

【参考方案1】：

你需要$compile你正在创建的元素，然后将其附加到DOM：

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

有一个类似问题的答案here。

【参考方案2】：

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

看到这个：Dynamically add directive in AngularJS