嵌套的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