Nested ng-repeat performance

Question

I heard that having nested ng repeats can seriously affect performance in angular if you end up with a lot of elements with angular expressions. Actually, I came across this code using the code I'm trying to write. I tried using bindonce to improve performance, but that didn't help much. I heard that you can use the directive to help with performance, but while I wrote the directives before, I'm not sure how to use the directive to improve the performance of something like that. Here is jsfiddle demonstrating the problem.

I understand that this is LOT of data, and indeed, I have to do some kind of pagination, but I'm trying to learn more about angular and performance. I can display the same data without angular, and the page will display much faster.

Here's what nested ng repeats look like:

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

Thanks!

Answer 1

Try using the track in such a way that the domains are not destroyed or recreated! Here is a great article by Ben Nadel on this topic:

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

Answer 2

, , . ng-repeat, , , . .

:

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);
                }
            }
        }
    }
});