Ng在同一集合上重复，通过应用程序多次使用

Ng-Repeat on Same Collection, used multiple times through an application

本文关键字：应用程序 集合 Ng      更新时间：2024-06-07

这个问题更多地与优化/性能有关。假设我有一组数据

scope.array = [1,2,3,5,...,1000];

我需要在这些元素上运行ng repeat，比如：

<div class="table" ng-repeat="a in array"> {{a}} </div>

事实上，我甚至不确定上面的内容是否准确，但这与问题的目的无关。现在让我们假设div在多个地方使用，也许像这样…

<div class="parent" ng-repeat="child in children">
    <div class="table" ng-repeat="a in array"> </div>
</div>

div.table的每一次重复都会实例化1000个新的作用域元素，即使它在同一个数据集上重复。如果数据绑定在功能上是单向的，即用户实际上无法操作集合，那么什么模式可以阻止所有这些冗余的范围创建？

您无法避免创建子作用域，这是Angular工作方式的关键部分。尽管这里真正的问题是手表的总数，而不是范围的创建。范围的创造是一个小的一次性操作，然而手表的生活在一排。

例如，以一个包含1000行和10列的表为例。渲染整个表将导致创建10000个手表。任何浏览器都无法应付这么多手表，这将导致UI延迟问题。

但是，为什么要为用户不可见的元素创建行和监视呢？这个特殊的问题并不是一个新问题，解决方案是使用虚拟缓冲。现有的Angular指令如下https://github.com/EnzeyNet/VirtualScroll和https://github.com/kamilkp/angular-vs-repeat已经为你做了这件事。

基本思想是，如果您的数据集为100000，则一次只能在屏幕上看到N个数字，可能是10-40，因此只渲染视图中的行。

需要考虑的要点：

  1. 不要在控制器中使用$scope。使用controllerAs Controller/View语法。请参阅以下最佳实践资源。

  2. 如果您想要单向绑定（如果您的数据只设置了一次并且不更新，则需要单向绑定），请使用::语法。文档可在此处找到。关于解释/例子，你可以参考这个博客。

相关文章：