AngularJS Ручной контроллер и шаблон

Я пытаюсь внедрить систему плагинов в angularjs, которая позволит пользователям настраивать, какие "виджеты" они будут видеть на определенной странице. Каждый виджет определяется контроллером и шаблоном (url). Возможно ли создать директиву, которая создает экземпляр контроллера, вызывает его с помощью шаблона и передает итоговый контент?

Цель состоит в следующем:

<div class="widget" ng-repeat="widget in widgets">
    <widget controller="widget.controller" templateUrl="widget.templateUrl"></widget>
</div>

Ответы

Ответ 1

Есть два способа сделать это; один использует вспомогательные директивы, уже доступные (например, ngInclude и ngController), а второй - ручной; ручная версия может быть быстрее, но я не могу быть уверен.

Простой способ:

Простым способом является создание нового элемента с атрибутами ngController и ngInclude, добавление его в элемент директивы, а затем $compile it:

var html = '<div ng-controller="'+ctrl+'" ng-include="'+tpl+'"></div>';
element.append(html);
$compile( element.contents() )( scope );

Ручной способ:

Ручным способом является то, что сами эти директивы будут делать по очереди; эта логика очень похожа на то, что делает ngView (хотя и без сложности). Мы получаем шаблон, сохраняя его в $templateCache, а затем добавляем его в DOM. Мы создаем новую дочернюю область и создаем экземпляр предоставленного контроллера и назначаем этот элемент управления элементу. Наконец, мы $compile it:

$http.get( tpl, { cache: $templateCache } )
.then( function( response ) {
  templateScope = scope.$new();
  templateCtrl = $controller( ctrl, { $scope: templateScope } );
  element.html( response.data );
  element.children().data('$ngControllerController', templateCtrl);
  $compile( element.contents() )( templateScope );
});

(Обратите внимание, что здесь нет мусора, который вам нужно будет реализовать, если виджеты меняются)

Вот Plunker, демонстрирующий оба метода: http://plnkr.co/edit/C7x9C5JgUuT1yk0mBUmE?p=preview