Angular动态创建的指令未执行

Question

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

这可能不是完成此任务的正确“Angular”方式，但不幸的是，我正在使用一些我无法更改的第 3 方库。我正在尝试动态创建一个角度指令并将其添加到页面中。这个过程是有效的，至少在指令元素被添加到 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