如何将 Angular 指令设置为在 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 元素并分配特定指令时，我可以使用它并且工作得很好（Drag/Drop 功能）。喜欢，

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

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

看到这个：Dynamically add directive in AngularJS

Answer 2

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

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

类似问题有答案here。

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

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

html

javascript

angularjs

angularjs-directive

angular2-directives