Question

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

我意识到它有很多数据，而且我应该做一些分页，但我正在尝试更多地了解Angular和性能。我可以在没有Angular的情况下渲染相同的数据，并且页面渲染速度更快。

以下是嵌套的ng-repeats的样子：

<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

尝试使用track这将确保dom节点不被破坏和重新创建！以下是Ben Nadel关于此主题的精彩文章：

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

Answer 2

我想出了如何做到这一点并确实产生了重大影响。我用一个生成链接的指令替换了内部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);
                }
            }
        }
    }
});

嵌套的ng-repeat性能

2 个答案: