AngularJS手动渲染控制器和模板(AngularJS Manually Render Cont

我试图实现angularjs一个插件系统，该系统将允许用户配置哪些“小部件”，他们将看到某一页上。每个插件由控制器和模板（URL）中所定义。是否有可能创建一个实例化一个控制器，与模板调用它，transcludes得到的内容指令？

我们的目标是这样的：

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

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

简单的方法：

最简单的方法是简单的创建一个新的元素ngController和ngInclude属性，将其追加到该指令的元素，然后$compile它：

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

手工方式：

手工的方式是做什么的这些指令会自己又做; 这个逻辑是非常相似， ngView呢（虽然没有复杂）。我们取模板，将其存储在$templateCache ，然后将其附加到DOM。我们创建了一个新的子范围和实例与它提供的控制器并分配控制器的元素。最后，我们$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