AngularJS手动渲染控制器和模板

Question

我正在尝试在angularjs中实现一个插件系统，该系统将允许用户配置他们将在特定页面上看到的“小部件”。每个窗口小部件均由控制器和模板（URL）定义。是否可以创建一个实例化控制器，使用模板调用它并包含结果内容的指令？

目标是这样的：

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

Answer 1

有两种方法可以做到这一点; 一种是使用已经可用的helper指令（例如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