如何通过ng-repeat循环遍历函数返回的项目?
如何通过ng-repeat循环遍历函数返回的项目?
我想重复创建div,其中的项是由函数返回的对象。 然而,下面的代码报告错误:
已达到10次$digest()迭代。 放弃! jsfiddle在这里:http://jsfiddle.net/BraveOstrich/awnqm/
Hello {{entity.id}}!
简短回答: 你真的需要这样的功能吗,还是可以使用属性?http://jsfiddle.net/awnqm/1/
详细回答
为了简单起见,我将仅描述您的情况-用于对象数组的ngRepeat。此外,我将省略一些细节。
AngularJS使用“脏检查”来检测更改。当应用程序启动时,它会运行 $rootScope
的$digest
。对于$rootScope
的 $digest
将对范围层次结构进行深度优先遍历。所有作用域都有观察列表。每个观察都有最后一个值(最初为initWatchVal
)。对于所有观察的每个作用域,$digest
运行它,获取当前值( watch.get(scope)
),并将其与watch.last
进行比较。如果当前值不等于watch.last
(始终是第一次比较),$digest
会将dirty
设置为true
。当所有作用域都被处理时,如果 dirty == true
,$digest
从$rootScope
开始另一个深度优先遍历。 当 dirty == false或traversals的数量= =10时,$digest
结束。在后一种情况下,将记录错误“到达10个$digest()迭代。”
现在来看看ngRepeat
。对于每次watch.get
调用,它会将集合中的对象(返回getEntities
的值)与缓存中的附加信息一起存储( HashQueueMap
由hashKey
)。 对于每个watch.get
调用,ngRepeat
尝试从缓存中获取其hashKey
的对象。如果它不存在于缓存中,ngRepeat
会将其存储在缓存中,创建新的作用域,将对象放在其中,创建DOM元素,等等。
关于 hashKey
。通常 hashKey
是由 nextUid()
生成的唯一数字。但是它也可能是一个 函数。生成 hashKey
后,它会被存储在对象中以备将来使用。
为什么你的示例会出现错误: 函数 getEntities()
总是返回一个带有新对象的数组。该对象没有 hashKey
并且不存在于 ngRepeat
缓存中。因此,在每个 watch.get
上,ngRepeat
都会为其生成新作用域,并为 {{entity.id}}
创建新的监视器。第一个 watch.get
上的监视器(watch.last == initWatchVal
),所以watch.get() != watch.last
。因此,$digest
开始新的遍历。所以,ngRepeat
创建新的作用域和新的监视器。所以……在经过 10 次遍历后,就会出现错误。
如何解决
- 不要在每次
getEntities()
调用时创建新对象。 - 如果需要创建新对象,可以为它们添加
hashKey
方法。请参见 此主题,了解示例。
希望了解 AngularJS 内部的人们如果我有错误的地方,请指正我。