AngularJS手动呈现控制器和模板

我正在试图在angularjs中实现一个插件系统，允许用户configuration他们将在某个页面上看到的“小部件”。 每个小部件由一个控制器和一个模板（url）定义。 是否有可能创build一个实例化控制器的指令，使用模板调用它并跨越结果内容？

目标是这样的：

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

Answer 1

有两种方法可以做到这一点; 一个使用已经可用的帮助指令（如ngInclude和ngController ），第二个是手动的; 手动版本可能会更快，但我不能确定。

简单的方法：

简单的方法是使用ngController和ngInclude属性简单地创build一个新的元素，将其附加到指令的元素，然后$compile它：

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

手动方式：

手动的方式是做这些指令本身会做的事情; 这个逻辑与ngView非常类似（尽pipe没有复杂性）。 我们获取模板，将其存储在$templateCache ，然后将其附加到DOM。 我们创build一个新的子范围，并用它实例化提供的控制器，并将该控制器分配给元素。 最后，我们$compile它：

 $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