嵌套的ng-repeat性能

Question

我听说有嵌套的ng-repeats会严重影响角度的性能，如果它导致大量带有角度表达式的元素。我实际上遇到了一些我正在尝试编写的代码。我尝试使用bindonce来提高性能，但没有多大帮助。我听说你可以使用指令来提高性能，但是在我写过指令之前，我不确定如何使用指令来提高这样的性能。 Here is a jsfiddle显示问题。

我意识到这是很多数据，实际上，我应该做某种分页，但我想了解更多关于Angular和性能的信息。我可以在没有Angular的情况下呈现相同的数据，并且页面渲染速度更快。

这里是嵌套的NG-重复样子：

<div ng-app="app" ng-controller="myController"> 
<div ng-repeat="module in modules"> 
    {{module.title}} 
    <div ng-repeat="clip in module.clips"> 
     {{clip.title}}<br/> 
     <a ng-repeat="transcript in clip.transcripts" href="transcript.href">{{transcript.text}}</a><br/> 
    </div> 
</div> 

谢谢！

Answer 1

我想出了如何做到这一点，它确实有很大的不同。我用一个生成链接的指令替换了内部的ng-repeat，并且性能明显更好。 Here is the updated fiddle。

更新后的指令看起来是这样的：

appModule.directive('transcripts', function() { 
    return { 
     restrict: 'A', 
     scope: { 
      transcripts: '=' 
     }, 
     compile: function(element) { 
      element.removeAttr('transcripts'); 
      return function(scope, element, attrs) { 
       for(var i = 0; i < scope.transcripts.length; i++) { 
        var link = '<a href="' + scope.transcripts[i].href + '" _target="_new">' + scope.transcripts[i].text + '</a>'; 
        element.append(link); 
       } 
      } 
     } 
    } 
}); 

Answer 2

尝试使用按部就班地进行，这将确保节点不会破坏并重新创建的DOM！下面是本纳德尔有关这个主题的大文章：

http://www.bennadel.com/blog/2556-using-track-by-with-ngrepeat-in-angularjs-1-2.htm