我有一个渲染表格单元格的指令(请参阅我在这里编译它的方式,基本上在链接fn Angular.js directive template using variable from parent/inherited scope中使用$compile),现在这用于两个ng-repeats,一个用于行,一个用于列,所以它是基本上

<ng-repeat row in rows>
  <ng-repeat column in columns>
    <my-cell-directive />
  </ng-repeat>      
</ng-repeat>

它有50行和8列,对(渲染)性能有很大的影响(无论如何都非常明显).

所以我一直在寻找一种方法来改进它.首先,我试图摆脱列的内部重复,创建一个my-cols指令,它在内部迭代列,找到它们的模板,创建一个字符串(里面有8列),然后编译它.其中将编译量从400降低到50.但它在渲染方面并没有明显改善(确实如此,但只有约15％).

现在我的另一个想法是将它减少到只有一个编译方式,基本上在ng-repeat的第一次迭代中编译它,然后保存(缓存)编译结果,这样指令就会使用它而不是一遍又一遍地编译它,只需用当前迭代中的绑定值替换绑定值.

有可能以某种方式吗？或者还有其他方法可以提高渲染速度吗？

解决方法:

如果可能的话,你应该避免在链接函数中使用$compile.你可以缓存$compile的parital结果.

使用编译对象cloneAttachFn的第二个参数

directive('lol', function($compile){
  var compiled = $compile(template);
  return function(scope, element, attr){
    compiled(scope, function(clonedElement, scope){
      element.append(clonedElement);  
    };
  }
})

example