Как динамически создавать директиву ngInclude?

Question

Когда я кладу это в моем HTML, он отлично работает:

<div ng-include="'my-template.html'"></div> 

Но когда я пытаюсь создать что ngInclude директива динамически с помощью JQuery (после того, как DOM готова), она не работает:

$(function() { 
    var el = document.createElement('div'); 
    el.setAttribute('ng-include', "'my-template.html'"); 
    $('.container').replaceWith(el); 
}); 

Элемент действительно вставлен в DOM с ожидаемым шаблоном, но он не интерпретируется как код AngularJS. Ошибок в консоли нет.

Что мне не хватает?

Answer 1

Вам нужно будет compile ваш HTML

Я не уверен, что синтаксис, как и в файле (используете ли вы requireJS или нет), но это должно быть что-то похожее на составление нового элемента с объем.

angular.element('[ng-app]') 
     .injector() 
     .invoke(['$compile', function ($compile) { 
        var $scope = angular.element(el).scope(); 
        $compile(el)($scope); 
        $scope.$apply(); 
       }]);