Question

我在ng-repeat内使用嵌套<tbody>生成一个包含动态内容的表格（表格内容由后端发送，无法预测）

由于此表已经在一个使用ng-repeat的指令中，如果我想要进行任何更改，我只能请求一个带有新id的新表。

问题是，当这个表长约1000行时，或者如果我在界面中加载了多个表时，一切都会变得迟钝。

出于测试目的，我创建了表格html，如：

for(var line = 0; line < $scope.content.tableBody.length; line++){
    testTable += "<tr>"
    for(var cell = 0; cell < $scope.content.tableHead.length; cell++){
        testTable += "<td style='background-color: WHITE'>"
        testTable += $scope.content.tableBody[line][$scope.content.tableHead[cell]].value
        testTable += "</td>"
    }
    testTable += "</tr>"
}

并使用ng-bind-html来展示它。性能差异很大。当然，我不想放弃角度提供的所有轻松（例如ng-class，ng-style，ng-if），但似乎所有范围都由{ {1}}会导致性能下降。我尝试使用一个绑定ng-repeat，::等等，但没有成功。

是否可以使用track by $index，并且在加载完所有内容后，只需将其设为内容即可“静态”＆＃39 ;? （与我们的范围，观众等）

Answer 1

尝试使用一次性绑定和track by $index在ng-repeat中进行一些调整来解决我的问题之后，我找到的解决方案是连接一个字符串，导致tbody具有相同的逻辑我之前在2个嵌套的ng-repeats中使用过。然后我使用我在另一篇文章中找到的指令将此字符串'嵌入'在我的html中。

delph.directive('compile', ['$compile', function ($compile) {
return function(scope, element, attrs) {
    var listener = scope.$watch(
        function(scope) {
            // watch the 'compile' expression for changes
            return scope.$eval(attrs.compile);
        },
        function(value) {
            // when the 'compile' expression changes
            // assign it into the current DOM
            element.html(value);

            // compile the new DOM and link it to the current
            // scope.
            // NOTE: we only compile .childNodes so that
            // we don't get into infinite loop compiling ourselves
            $compile(element.contents())(scope);

        }
    );


};
}]);

内存消耗有一个主要的改善

角度ng-repeat作为静态内容（性能问题）

1 个答案: