Wie Angular Richtlinie auf das DOM-Element in Javascript erstellt Set

Question

Ich habe eine Richtlinie, die die Drag & Drop von Dom Elemente erlaubt, die:

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

Nun, ich kann es verwenden und funktioniert perfekt (Drag/Drop-Funktionalität), wenn ich ein DOM-Element auf der HTML-Seite erstellen und die spezifische Anweisung zuweisen. Wie,

HTML:

<div my-draggable = "">Hello</div> 
<div my-draggable = "">Sid</div> 

Das Problem ist, ich bin nicht in der Lage, die Richtlinie auf jene Elemente zuweisen ich in Javascript-Code bin zu schaffen. Wie,

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

Die Richtlinie nicht funktioniert in diesem Fall!

Was ist das Problem?

Was habe ich falsch gemacht?

Danke!

Answer 1

Sie müssen das Element, das Sie erstellen, $compile, bevor es auf das DOM anhängt:

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

here eine Antwort auf eine ähnliche Frage gibt.

Answer 2

Sie können Anweisung nicht nur als HTML-Knoten hinzufügen. Weil Sie auf diese Weise jQuery/Javascript mit AngularJS mischen. Wenn Sie ein neues Element hinzufügen, kann AngularJS nicht wissen, dass es hinzugefügt wurde. Sie können den $ compile-Dienst verwenden, um Ihr HTML-Element zu kompilieren, damit AngularJS Ihre Anweisung tatsächlich ausführt.

sehen: Dynamically add directive in AngularJS