我正在尝试在 angularjs 中实现一个插件系统,该系统允许用户配置他们将在某个页面上看到哪些“小部件”。每个小部件都由一个 Controller 和一个模板(url)定义。是否可以创建一个指令来实例化 Controller 、使用模板调用它并嵌入结果内容?
目标是这样的:
<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。我们创建一个新的子作用域并用它实例化提供的 Controller 并将该 Controller 分配给该元素。最后,我们$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
关于AngularJS 手动渲染 Controller 和模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16343458/