不NG-重复保留DOM元素或创建所有新的集合时的变化？ [英] Does ng-repeat retain DOM elements or create all new ones when the collection changes?

问题描述

我已经看到了很多关于秩序问题在NG-重复饰面相对于其他指令或事物的角度去土地上，但我一直没能找到一个答案，它实现了这个究竟如何。

I've seen a lot of questions about the order in which ng-repeat finishes compared to other directives or things going on in Angular land, but I haven't been able to find an answer to how exactly it accomplishes this.

我有它如何工作的两个想法。

I have two ideas of how it could work.

第一种方式：
当NG-repeat的观察家触发器，它会删除其从DOM创建的所有元素，然后创建所有的新元素在他们的地方，即使其中许多元素都是相同的（例如，在1项的情况下，加入到支持数组）。

First Way: When ng-repeat's watcher triggers, it removes all elements it created from the DOM then creates all new elements in their place, even if many of those elements are the same (e.g. in the case of 1 item added to the backing array).

方式二：由于NG-重复已经跟踪哪些元素与它的后盾集合中哪些项目去了，它只是删除该集合中不再存在的项目，并为项目的新元素这是新的集合。

Second way: Since ng-repeat already keeps track of which elements go with which items in its backing collection, it simply removes the items that no longer exist in the collection and creates new elements for items that are new to the collection.

这是为什么？

Which is it and why?

推荐答案

这是在第二种方式：角的试图聪明地创建/删除DOM元素的：

的 ngRepeat 指令提供了一种方法来呈现给模板项目的集合。要做到这一点，AngularJS编译指定的模板，然后克隆它集合中的每一个独特的项目。由于集合由控制器突变，AngularJS添加，删除，并根据需要更新相关的DOM元素。

The ngRepeat directive provides a way to render a collection of items given a template. To do this, AngularJS compiles the given template and then clones it for each unique item in the collection. As the collection is mutated by the Controller, AngularJS adds, removes, and updates the relevant DOM elements as needed.

但是，如何AngularJS知道何时执行哪些操作？如果你开始测试渲染，你会发现AngularJS不会蛮力DOM创建;也就是说，它不会重新创建为每个渲染了DOM。相反，它仅创建时一个完全新的项目已经被引入到收集新的DOM元素。如果现有项目已更新，AngularJS仅仅更新相关的DOM属性，而不是创建一个新的DOM节点。

But, how does AngularJS know which actions to perform when? If you start to test the rendering, you'll discover that AngularJS doesn't brute force DOM creation; that is, it doesn't recreate the DOM for every rendering. Instead, it only creates a new DOM element when a completely new item has been introduced to the collection. If an existing item has been updated, AngularJS merely updates the relevant DOM properties rather than creating a new DOM node.

集合中的元素传递时值（有这上面链接的博客文章一个很好的例子），这仍然可以不必要地影响性能，即。这就是为什么角度支持的轨道由为ngRepeat 自1.2版：这是一个方法来帮助角决定何时DOM创建是必要的：

This can still impact performance unnecessarily, i.e. when passing elements by-value in a collection (there's an excellent example of this in the blog post linked above). That's why Angular supports "track by" for ngRepeat since version 1.2: It's a way to help Angular decide when DOM creation is necessary:

通过这个协会的地方，AngularJS不会破坏$并重新创建DOM节点不必要的。这可以有一个巨大的性能和用户体验的好处。

With this association in place, AngularJS will not $destroy and re-create DOM nodes unnecessarily. This can have a huge performance and user experience benefit.

的官方文档状态的：

您还可以提供一种可用于在物体与DOM的元素集合中的相关联的可选跟踪功能。如果没有指定跟踪功能是NG重复集合中通过关联身份的元素。

You can also provide an optional tracking function which can be used to associate the objects in the collection with the DOM elements. If no tracking function is specified the ng-repeat associates elements by identity in the collection.

例如：中的项目项目跟踪由item.id 是一个典型的模式，当项目来自数据库。在这种情况下，对象的身份并不重要。只要他们的ID属性相同的两个对象被认为是等价的。

For example: item in items track by item.id is a typical pattern when the items come from the database. In this case the object identity does not matter. Two objects are considered equivalent as long as their id property is same.

这篇关于不NG-重复保留DOM元素或创建所有新的集合时的变化？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！