4

I have heard that having nested ng-repeats can seriously impact performance in angular if it results in a large number of elements with angular expressions in them. I actually have run into this case with some code I'm trying to write. I tried using bindonce to improve the performance, but it didn't help much. I have heard that you can use a directive to help with performance, but while I've written directives before, I'm not sure how to use a directive to improve the performance of something like this. Here is a jsfiddle demonstrating the problem.

I realize that it is A LOT of data and really, I should be doing some sort of pagination, but I'm trying to learn more about Angular and performance. I can render this same data without Angular and the page renders much faster.

Here is what the 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!

Jim Cooper
  • 5,113
  • 5
  • 30
  • 35
  • i don't think you posted your fiddle – Keith Jan 28 '14 at 05:07
  • duplicated with http://stackoverflow.com/questions/16114946/ways-to-improve-angularjs-performance-even-with-large-number-of-dom-elements – David Lin Jan 28 '14 at 05:20
  • Oops, updated the question to show the fiddle. – Jim Cooper Jan 28 '14 at 05:29
  • 1
    After reading the duplicated post by @DavidLin, I still don't feel like I have a great solution. I should point out that my question is not about performance after the page has loaded, but performance in just rendering the page. If I render the page using something other than Angular it renders in less than a second. With Angular it takes a couple of seconds. – Jim Cooper Jan 28 '14 at 05:35
  • @JimCooper : I have the exact same issue. Can you let me know if you have found a work-around, like directive for the same? – Roy M J Oct 14 '14 at 10:52

2 Answers2

3

Try using track by this will ensure the dom nodes are not destroyed and recreated! Here is great article from Ben Nadel on this topic:

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

user1119167
  • 52
  • 5
0

I figured out how to do this and it did make a significant difference. I replaced the inner ng-repeat, with a directive that generated the links and the performance was noticeably better. Here is the updated fiddle.

The updated directive looks like this:

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);
                }
            }
        }
    }
});
Jim Cooper
  • 5,113
  • 5
  • 30
  • 35