如何角指令设置为在Javascript

创建我有一个指令，它允许DOM元素的拖放是的DOM元素：如何角指令设置为在Javascript

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);

该指令是不是在这种情况下工作！

什么问题？

我做错了什么？

谢谢！

来源

2016-08-02 Khawaja Muhammad SadeedUllah

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

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

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

来源

2016-08-02 17:58:42 Kyriakos

非常感谢你！它为我工作 –

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

看到这个：Dynamically add directive in AngularJS

来源

2016-08-02 17:52:58 Nilesh

如何角指令设置为在Javascript

回答

相关问题