角动态创建的指令不执行

Question

Plnkr样本：http://plnkr.co/edit/jlMQ66eBlzaNSd9ZqJ4m?p=preview][1]

这可能不是正确的“角”的方式来做到这一点，但不幸的是，我与我有限的能力改变一些第三方库工作。我试图动态创建一个角度指令并将其添加到页面。该过程至少在指令元素被添加到DOM的意义上说起作用，然而它并没有被实际执行 - 在这一点上它只是一个愚蠢的DOM。

相关的代码如下：

<div ng-app="myModule"> 
    <div dr-test="Static Test Works"></div> 
    <div id="holder"></div> 
    <a href="#" onclick="addDirective('Dynamic test works')">Add Directive</a> 
</div> 
var myModule = angular.module('myModule', []); 
myModule.directive('drTest', function() { 
    console.log("Directive factory was executed"); 
     return { 
      restrict: 'A', 
      replace: true, 
      link: function postLink(scope, element, attrs) { 
       console.log("Directive was linked"); 
       $(element).html(attrs.drTest); 
      } 
     } 
}); 
function addDirective(text){ 
    console.log("Dynamically adding directive"); 
    angular.injector(['ng']).invoke(['$compile', '$rootScope',function(compile, rootScope){ 
     var scope = rootScope.$new(); 
     var result = compile("<div dr-test='"+text+"'></div>")(scope); 
     scope.$digest(); 
     angular.element(document.getElementById("holder")).append(result);  
}]); 
} 
&lt;/script&gt; 

Answer 1

虽然追加指令DOM，你需要用你的模块调用，以及在喷油器，因为指令drTest只可在你的模块，所以在创建注入器除了加入ng之外，还要添加你的模块。而且您并不需要执行范围适用，因为该元素已经与范围一起编译。您也可以删除多余的$(element)。

 angular.injector(['ng', 'myModule']).invoke(['$compile', '$rootScope',function(compile, rootScope){ 
      var scope = rootScope.$new(); 
      var result = compile("<div dr-test='"+text+"'></div>")(scope); 
      angular.element(document.getElementById("holder")).append(result); 
     }]); 

Demo