如何使用角度加载动态内联模板 [英] How to load dynamic inline template with angular
问题描述
我有一个循环对象数组的 ng-repeat.在每个循环中,值 'template' &'values' 被初始化.以下版本有效并使用 ng-include 加载模板,但它恰好非常非常慢:
<div ng-init="values = dbo.get4(attobj.key); key = attobj.key; template = attobj.template || getAttributeTemplate(dbo.clazz + attobj.key);"><div class="content" ng-include="template"></div></td></tr>
模板和值的值是动态的,但它始终保存模板/脚本的 id,例如:
<script type="text/ng-template" id="link_as_dn_template"><a href="#/view/{{ dbo.cid }}"><p>{{ dbo.displayName() }}</p></a></脚本
请注意,被调用的模板也使用 ng-include 调用了第二个模板.
我试图通过使用自定义指令加载模板来加快速度,但似乎无法使以下示例适用于我的情况:
app.directive('ngInline', ['$templateCache',函数($templateCache){返回 {限制:'A',priority: 400,//与 ng-include 相同.编译:函数(元素,属性){var templateName = attrs.ngInline;如果(!模板名称){throw new Error('ngInline: 预期模板名称');}var template = $templateCache.get(templateName);如果(angular.isUndefined(模板)){throw new Error('ngInline: unknown template ' + templateName);}element.html(模板);}};}]);
谁能向我解释如何正确有效地执行此操作(平均 100 行 x35 列 -> 多值单元格/渲染)
这个例子来自:http://zachsnow.com/#!/blog/2014/angularjs-faster-ng-include/
解决方案 指令:
app.directive('customtemp', function($templateCache, $compile) {返回 {链接:函数(范围,元素,属性){var z = $templateCache.get(scope.template);element.html(z);$compile(element.contents())(scope);}}});
主模板:
<td class="tableColumnsDocs" ng-repeat="attobj in columns track by $index"><customtemp ng-init="values = dbo.get4(attobj.key); key = attobj.key; template = attobj.template || getAttributeTemplate(dbo.clazz + attobj.key);"></customtemp></td></tr>示例加载/调用模板:
<script type="text/ng-template" id="link_as_dn_template"><a href="#/view/{{ dbo.cid }}"><p>{{ dbo.displayName() }}</p></a>
结果比使用 ng-include 快 4 倍.
I have an ng-repeat that loops over an array of objects. At each loop the value 'template' & 'values' is initialised. The following version works and uses ng-include to load the template but it happens to be very very slow:
<tr class="tableRowsDocs" ng-repeat="dbo in rows track by $index">
<div ng-init="values = dbo.get4(attobj.key); key = attobj.key; template = attobj.template || getAttributeTemplate(dbo.clazz + attobj.key);">
<div class="content" ng-include="template"></div>
</div>
</td>
</tr>
The value for template and values is dynamic but it always holds the id of a template/script like:
<script type="text/ng-template" id="links_as_dns_template">
<div ng-repeat="dbo in values track by $index" ng-include="'link_as_dn_template'"></div>
</script>
<script type="text/ng-template" id="link_as_dn_template">
<a href="#/view/{{ dbo.cid }}"><p>{{ dbo.displayName() }}</p></a>
</script
Notice that the called template calles a second template also using ng-include.
I am trying to make things faster by using a custom directive to load the templates but cant seem to be able to make the following example to work in my case:
app.directive('ngInline', [
'$templateCache',
function($templateCache) {
return {
restrict: 'A',
priority: 400, // Same as ng-include.
compile: function(element, attrs){
var templateName = attrs.ngInline;
if(!templateName){
throw new Error('ngInline: expected template name');
}
var template = $templateCache.get(templateName);
if(angular.isUndefined(template)){
throw new Error('ngInline: unknown template ' + templateName);
}
element.html(template);
}
};
}
]);
Can anyone explain to me how to do this properly and efficiently(average 100 rows x35 columns ->multivalued cells/render)
This example is from:
http://zachsnow.com/#!/blog/2014/angularjs-faster-ng-include/
解决方案 Directive:
app.directive('customtemp', function($templateCache, $compile) {
return {
link: function(scope, element, attrs) {
var z = $templateCache.get(scope.template);
element.html(z);
$compile(element.contents())(scope);
}
}
});
Main template:
<tr class="tableRowsDocs" ng-repeat="dbo in rows track by $index">
<td class="tableColumnsDocs" ng-repeat="attobj in columns track by $index">
<customtemp ng-init="values = dbo.get4(attobj.key); key = attobj.key; template = attobj.template || getAttributeTemplate(dbo.clazz + attobj.key);">
</customtemp>
</td>
</tr>
Example Loaded/called templates:
<script type="text/ng-template" id="links_as_dns_template">
<div ng-repeat="dbo in values track by $index" ng-include="'link_as_dn_template'"></div>
</script>
<script type="text/ng-template" id="link_as_dn_template">
<a href="#/view/{{ dbo.cid }}"><p>{{ dbo.displayName() }}</p></a>
</script>
Result 4 times faster than using ng-include.
这篇关于如何使用角度加载动态内联模板的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆