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

问题描述

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

我们的目标是这样的：

 ＆LT; D​​IV CLASS =小部件NG重复=窗口小部件在小部件＆GT;
    ＆LT;小部件控制器=widget.controllertemplateUrl =widget.templateUrl＆GT;＆LT; /部件＆GT;
＆LT; / DIV＆GT;
 

解决方案

有两种方法可以做到这一点;人使用已有的（如 ngInclude 和 ngController ）辅助指令，二是说明书;手动版的可能的更快，但我不能肯定。

简单的办法：

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

VAR HTML ='＆LT; D​​IV NG控制器=+ CTRL +'NG-包括=+ TPL + '＆GT;＆LT; / DIV＆GT;';
element.append（HTML）;
$编译（element.contents（））（范围）;


手动方式：

手动方式就是做这些指令会自己又做;这个逻辑非常类似于 ngView 做（虽然没有复杂）。我们取模板，将其存储在 $ templateCache ，然后将其追加到DOM。我们创建了一个新的子范围和实例与它提供的控制器并分配控制器的元素。最后，我们 $编译是：

$ http.get（TPL，{缓存：$ templateCache}）
。然后（功能（响应）{
  templateScope =范围美元的新（）。
  templateCtrl = $控制器（CTRL，{$范围：templateScope}）;
  element.html（response.data）;
  element.children（）数据（'$ ngControllerController'，templateCtrl）。
  $编译（element.contents（））（templateScope）;
}）;


（注意，没有垃圾收集在这里，你需要实现如小窗口改变）

下面是一个Plunker证明这两种方法：<一href=\"http://plnkr.co/edit/C7x9C5JgUuT1yk0mBUmE?p=$p$pview\">http://plnkr.co/edit/C7x9C5JgUuT1yk0mBUmE?p=$p$pview

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屋！