如何使用角度加载动态内联模板

Question

我有一个循环遍历对象数组的 ng-repeat。在每个循环中，都会初始化值“模板”和“值”。以下版本可以正常工作并使用 ng-include 加载模板，但它恰好非常非常慢：

<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，例如：

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

我试图通过使用自定义指令加载模板来加快速度，但似乎无法使以下示例适用于我的情况：

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 列 -> 多值单元格/渲染）

这个例子来自： http://zachsnow.com/#!/blog/2014/angularjs-faster-ng-include/

Answer 1

指令：

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>

加载/调用模板示例：

<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-include 快 4 倍。