当集合发生变化时,ng-repeat是否会保留DOM元素或创建所有新元素?

时间:2014-05-20 17:42:49

标签: angularjs angularjs-ng-repeat

我已经看到很多关于ng-repeat完成的顺序与其他指令或Angular上发生的事情相比的问题,但是我还没有找到答案来确定它是如何完成的。

我有两个关于它如何运作的想法。

第一种方式: 当ng-repeat的观察者触发时,它会删除它从DOM创建的所有元素,然后在其位置创建所有新元素,即使这些元素中的许多元素相同(例如,在支持数组中添加了1个项目的情况下)。 / p>

第二种方式:由于ng-repeat已经跟踪哪些元素与其后备集合中的哪些项目相关,因此它只删除集合中不再存在的项目并为项目创建新元素这是该系列的新功能。


这是为什么?为什么?

1 个答案:

答案 0 :(得分:6)

这是第二种方式: Angular tries to be smart about creating/removing DOM elements

  

ngRepeat指令提供了一种在给定模板的情况下呈现项集合的方法。为此,AngularJS编译给定的模板,然后为集合中的每个唯一项克隆它。由于Controller对集合进行了变更,AngularJS会根据需要添加,删除和更新相关的DOM元素。

     

但是,AngularJS如何知道何时执行哪些操作?如果你开始测试渲染,你会发现AngularJS不会强行创建DOM;也就是说,它不会为每次渲染重新创建DOM。相反,它只在一个全新的项目被引入集合时才创建一个新的DOM元素。如果现有项已更新,AngularJS仅更新相关的DOM属性,而不是创建新的DOM节点。

这仍然会不必要地影响性能,即在集合中传递元素按值时(在上面链接的博客文章中有一个很好的例子)。这就是版本1.2之后Angular supports "track by" for ngRepeat的原因:它是一种帮助Angular决定何时创建DOM的方法:

  

通过这种关联,AngularJS不会破坏并不必要地重新创建DOM节点。这可以带来巨大的性能和用户体验优势。

官方文档states

  

您还可以提供可选的跟踪功能,该功能可用于将集合中的对象与DOM元素相关联。如果未指定跟踪功能,则ng-repeat按集合中的标识关联元素。

     

例如:item in items track by item.id是项目来自数据库时的典型模式。在这种情况下,对象标识无关紧要。只要两个对象的id属性相同,它们就被认为是等价的。