问题描述
我要重复创建的div,项目是由函数返回的对象。而下面的code报告错误:
10 $摘要()迭代到达。中止!的jsfiddle是在这里:
<机身NG-应用>
< DIV NG重复=实体getEntities()>
您好{{entity.id}}!
< / DIV>
< /身体GT;
简短的回答:你真的需要这样的功能,或者您可以使用属性?
龙答案
为了简单起见,我将只描述你的情况 - ngRepet为对象的数组。另外,我会忽略一些细节。
AngularJS使用检测的变化。当应用程序启动运行 。 $消化
将做深度优先遍历。所有示波器都有手表的名单。每一款手表都有一个值(最初 initWatchVal
)。对于每一个作用域 $消化
运行它所有的手表,得到的电流值( watch.get(范围)
)和比较它 watch.last
。如果电流值不等于 watch.last
(总是先比较) $消化
设置脏
到真正
。当所有的作用域,如果脏==真
$消化
开始从另一个深度优先遍历 $ rootScope 。 $消化
当脏==虚假或遍历== 10.在后一种情况下数,错误10 $摘要()迭代达到。结束将会被记录。
现在关于 ngRepeat
。对于每个 watch.get
叫它存储从集合对象(返回的值 getEntities
)的缓存与aditional的信息(<$c$c>HashQueueMap$c$c>通过 hashKey
)。对于每一个 watch.get
通话 ngRepeat
尝试按 hashKey $ C来获得对象$ C>从缓存中。如果它不存在缓存,
ngRepeat
将其存储在缓存中,创造了新的范围,把对象就可以了,创建DOM元素,etc.
现在关于<$c$c>hashKey$c$c>.通常 hashKey
是<$c$c>nextUid()$c$c>.但它可以是function. hashKey
存储对象为未来的使用后。
为什么你的榜样产生误差:函数 getEntities()
总是返回新的对象数组。这个对象没有 hashKey
和 ngRepeat
缓存不存在。因此, ngRepeat
每个 watch.get
产生了新的手表为它新的余地 {{ entity.id}}
。这款腕表首次 watch.get
的 watch.last == initWatchVal
。因此, watch.get()!= watch.last
。因此, $摘要
开始新的导线。因此, ngRepeat
创建了新的手表新范围。所以...... 10后穿越你的错误。
如何修复它
- 请不要在每个
getEntities创建新的对象()
电话。 - 如果你需要创建你可以添加
hashKey
方法,为他们的新对象。请参见的例子。
希望的人,谁知道AngularJS内部纠正我,如果我错了的东西。
I want to create divs repeatedly, the items is objects returned by a function. However the following code report errors:10 $digest() iterations reached. Aborting! jsfiddle is here: http://jsfiddle.net/BraveOstrich/awnqm/
<body ng-app>
<div ng-repeat="entity in getEntities()">
Hello {{entity.id}}!
</div>
</body>
Short answer: do you really need such function or you can use property? http://jsfiddle.net/awnqm/1/
Long answer
For simplicity I will describe only your case - ngRepet for array of objects. Also, I'll omit some details.
AngularJS uses dirty checking for detecting changes. When application is started it runs $digest
for $rootScope
. $digest
will do depth-first traversal for scope's hierarchy. All scopes have list of watches. Each watch has last value (initially initWatchVal
). For each scope for all watches $digest
runs it, gets current value (watch.get(scope)
) and compares it to watch.last
. If current value not equal to watch.last
(always for first compare) $digest
set dirty
to true
. When all scopes are processed if dirty == true
$digest
starts another depth-first traversal from $rootScope
. $digest
ends when dirty == false or number of traversals == 10. In the latter case, the error "10 $digest() iterations reached." will be logged.
Now about ngRepeat
. For each watch.get
call it stores objects from collection (returning value of getEntities
) with aditional information in cache (HashQueueMap
by hashKey
). For every watch.get
call ngRepeat
try to get object by its hashKey
from cache. If it does not exist in cache, ngRepeat
stores it in cache, creates new scope, puts object on it, creates DOM element, etc.
Now about hashKey
. Usually hashKey
is unique number generated by nextUid()
. But it can be function. hashKey
is stored in object after generating for future use.
Why your example generates error: function getEntities()
always returns array with new object. This object doesn't have hashKey
and doesn't exist in ngRepeat
cache. So ngRepeat
on each watch.get
generates new scope for it with new watch for {{entity.id}}
. This watch on first watch.get
has watch.last == initWatchVal
. So watch.get() != watch.last
. So $digest
starts new traverse. So ngRepeat
creates new scope with new watch. So ... after 10 traverses you get error.
How you can fix it
- Do not create new objects on every
getEntities()
call. - If you need create new objects you can add
hashKey
method for them. See this topic for examples.
Hope people who know AngularJS internals correct me if I'm wrong in something.
这篇关于如何循环项目通过NG-重复函数返回?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!