如何加載帶角度的動態內聯模板

Question

我有一個ng-repeat循環遍歷一個對象數組。在每個循環中，初始化值'模板'&'值'。以下版本的作品，並使用NG-包括加載模板，但它恰好是非常非常慢：

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

模板和值值是動態的，但它始終保持模板/標識腳本，如：

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

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