カスタムディレクティブが正しく

Question

私は角-outsideロードしようとしていますがロードされていない動的カスタムディレクティブ が、カスタムディレクティブは、私は次のように$compile を使用しているにもかかわらず、ロードされていない

app.directive('mydirective',function(){ 
    return { 
    template: '<div>Succeeded !</div>', 
    } 
}) 

と、ここで私は動的に指示をロードしています場所：

function showresultcust() { 
angular.injector(['ng']).invoke(['$compile', 
    function ($compile) { 
     var scope = angular.element(document.getElementById("test1")).scope(); 
     var _html = '<div>{{name}}-</div><div mydirective >Not Succeed</div>'; 
     //var _html='<div >{{loaded}}</div>'; 
     var obj = $('#content'); 
     $('#content').html($compile(_html)(scope)); 
     // compile!!! 
     $compile(obj.contents())(scope); 
     scope.$digest(); 
     setTimeout(function() { 
      scope.$apply(); 
     }); 
    } 
]); 
} 

ダイナミックHTMLで{{name}}が正しいロードされていることに注意してくださいカスタムディレクティブではありません。 完全なデモはthis 'plnkr.co' link

上記の 'plnkr'リンクで直接修正できたら、私はそれを感謝します。

Answer 1

mydirectiveディレクティブがngモジュールの一部ではないため、このコードではコードがコンパイルされていません。ディレクティブを含むモジュールを新しいインジェクタの依存関係リストに追加します。

//NOT this 
//angular.injector(['ng']).invoke(['$compile', 

//Do this 
angular.injector(['ng','tumblr']).invoke(['$compile', 
    function ($compile) { 
     var scope = angular.element(document.getElementById("test1")).scope(); 
     var _html='<div>{{name}}-</div><div mydirective >Not Succeed</div>'; 
     $('#content').html($compile(_html)(scope)); 
     scope.$apply(); 
    } 
]); 
} 

angular.injector関数は常に新しい注射器を作成し、それが依存関係リスト内の全ての依存関係を必要とします。