Угловая создается динамически директива не выполняется

Question

Plnkr образец: [http://plnkr.co/edit/jlMQ66eBlzaNSd9ZqJ4m?p=preview][1]

Это не может быть правильным «Угловая» способ сделать это, но, к сожалению, я работаю с некоторыми 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