Angular动态创建的指令不执行

Question

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

这可能不是正确的＆＃34; Angular＆＃34;实现这一目标的方法，但遗憾的是我正在与一些我改变能力有限的第三方图书馆合作。我试图动态创建一个角度指令并将其添加到页面中。这个过程至少在指令元素被添加到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