Ng-Repeat on Same Collection，通过应用程序多次使用

Question

这个问题与 optimization/performance 的关系比其他任何问题都大。假设我有一组数据

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 个新范围元素，即使它是在同一数据集上重复。如果数据绑定在功能上是单向的，即用户实际上不能操作集合，那么什么模式可以让你阻止所有这些冗余范围的创建？

Answer 1

要考虑的要点：

不要在控制器中使用 $scope。使用 controllerAs Controller/View 语法。 See the following best practice resource.
如果您想要单向绑定（如果您的数据只设置一次且不更新，这是可取的），请使用 :: 语法。可以找到文档 here. For an explanation/example you can refer to this blog.

Answer 2

您无法避免创建子作用域，这是 Angular 工作方式的关键部分。尽管这里真正的问题是手表的总数而不是示波器的创建。示波器的创建是一个小的一次性操作，但是手表在整个行的生命周期中继续存在。

例如，取 1,000 行和 10 列的 table。呈现整个 table 将导致创建 10,000 个手表。手表的数量不是任何浏览器都可以处理的，并且会导致 UI 延迟问题。

但为什么要为用户不可见的元素创建行和监视呢？该特定问题不是新问题，解决方案是使用虚拟缓冲。现有 Angular 指令（例如 https://github.com/EnzeyNet/VirtualScroll and https://github.com/kamilkp/angular-vs-repeat 已经为您执行此操作。

基本的想法是，如果你有一个 100,000 的数据集，你一次只能在屏幕上看到 N 个数字，可能是 10-40，所以只渲染那些在视图中的行。

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