Angular.js缓存$编译模板/在ng-repeat内呈现指令的性能

Question

我有一个渲染表格单元格的指令(请参阅我在这里编译它的方式,基本上使用$compile内部link fn Angular.js指令模板使用来自父/继承范围的变量),现在这用于两个ng-repeats,一个用于行,一个对于列,所以它基本上是

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

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

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

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

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

Answer 1

$compile如果可能,您应该避免使用内部链接功能.你可以缓存$compile虽然的parital结果.

使用compiled对象cloneAttachFn的第二个参数

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

例