AngularJS 手动渲染控制器和模板 [英] AngularJS Manually Render Controller and Template
问题描述
我正在尝试在 angularjs 中实现一个插件系统,它允许用户配置他们将在某个页面上看到哪些小部件".每个小部件由控制器和模板(url)定义.是否可以创建一个指令来实例化控制器,使用模板调用它并嵌入结果内容?
目标是这样的:
有两种方法可以做到这一点;一个使用已经可用的辅助指令(如 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(函数(响应){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一个>
I'm trying to implement a plugin system in angularjs that would allow users to configure which "widgets" they will see on a certain page. Each widget is defined by a controller and a template(url). Is it possible to create a directive that instantiates a controller, invokes it with a template and transcludes the resulting content?
The goal is something like this:
<div class="widget" ng-repeat="widget in widgets">
<widget controller="widget.controller" templateUrl="widget.templateUrl"></widget>
</div>
There are two ways to do this; one uses the helper directives already available (like ngInclude
and ngController
) and the second is manual; the manual version might be faster, but I cannot be sure.
The Easy Way:
The easy method is to simple create a new element with ngController
and ngInclude
attributes, append it to the directive's element, and then $compile
it:
var html = '<div ng-controller="'+ctrl+'" ng-include="'+tpl+'"></div>';
element.append(html);
$compile( element.contents() )( scope );
The Manual Way:
The manual way is to do what these directives would themselves do in turn; this logic is very similar to what ngView
does (though without the complexity). We fetch the template, storing it in $templateCache
, and then append it to the DOM. We create a new child scope and instantiate the provided controller with it and assign that controller to the element. Finally, we $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 );
});
(Note that there is no garbage collection here, which you would need to implement if the widgets change)
Here is a Plunker demonstrating both methods: http://plnkr.co/edit/C7x9C5JgUuT1yk0mBUmE?p=preview
这篇关于AngularJS 手动渲染控制器和模板的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!