如何角指令設置爲在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

回答

相關問題