AngularJS 手动渲染控制器和模板 [英] AngularJS Manually Render Controller and Template

问题描述

我正在尝试在 angularjs 中实现一个插件系统，它允许用户配置他们将在某个页面上看到哪些小部件".每个小部件由控制器和模板(url)定义.是否可以创建一个指令来实例化控制器，使用模板调用它并嵌入结果内容?

目标是这样的:

<widget controller="widget.controller" templateUrl="widget.templateUrl"></widget>

解决方案

有两种方法可以做到这一点；一个使用已经可用的辅助指令(如 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屋！