如何加载具有角动态联模板 [英] How to load dynamic inline template with angular

问题描述

我有一个NG重复的遍历对象的数组。在每个循环值'模板'和; 价值被初始化。以下版本的作品，并使用NG-包括加载模板，但它发生是非常非常慢：

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>

模板和价值观的价值是动态的，但它总是持有模板的ID /脚本，如：

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

请注意，所谓的模板卡列斯第二模板还采用NG-包括

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);
      }
    };
  }
]);

任何人都可以向我解释如何做到这一点正确而高效地（平均100行X35列 - >多值单元格/渲染）

Can anyone explain to me how to do this properly and efficiently(average 100 rows x35 columns ->multivalued cells/render)

这个例子是：
http://zachsnow.com/#!/blog/2014/ angularjs更快的-NG-包括/

推荐答案

指令：

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);
       }
   }
});

主模板：

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

结果比使用NG-包括快4倍。

Result 4 times faster than using ng-include.

这篇关于如何加载具有角动态联模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！