AngularJSで要素を動的に作成した後のディレクティブのバインド

Question

要素を動的に作成するコード（xおよびparentDiv）があります。

var x = document.createElement('myTag'); 
parentDiv.appendChild(x); 

そして、私はこのようになりますディレクティブがあります。

.directive("myTag", function($compile) { 
    return { 
     restrict: "E", 
     replace: true, 
     template: "<span><img src='something/url/img.png'></img></span>" 
    } 
}) 

私はディレクティブでそのコードにmytagというタグを置き換えることができますどのように？ AngularJS以外のコードをその範囲で扱えるように$ compileを使用していますが、どこに置くべきか分かりません。

Answer 1

実は、あなたの要素を追加する前compileを使用する必要があります。

var childScope = scope.$new(); 
var x = document.createElement('myTag'); 
var compiled = $compile(x)(childScope); 
parentDiv.appendChild(compiled); 

$compileサービスは、テンプレートフェッチします：

<span><img src='something/url/img.png'></img></span> 

をしてxで参照DOM要素内に置きます。