How to Loop through items returned by a function with ng
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
getEntities()
call. hashKey
method for them. See this topic for examples. Hope people who know AngularJS internals correct me if I'm wrong in something.
在重复之外初始化数组
<body ng-app>
<div ng-init="entities = getEntities()">
<div ng-repeat="entity in entities">
Hello {{entity.id}}!
</div>
</div>
</body>
This was reported here and got this response:
Your getter is not idempotent and changes the model (by generating a new array each time it is called). This is forcing angular to keep on calling it in hope that the model will eventually stabilize, but it never does so angular gives up and throws an exception.
The values the getter return are equal but not identical and that's the problem.
You can see this behavior go away if you move the array outside the Main controller:
var array = [{id:'angularjs'}];
function Main($scope) {
$scope.getEntities = function(){return array;};
};
because now it is returning the same object each time. You may need to re-architect your model to use a property on the scope instead of a function:
We worked around it by assigning the result of the controller's method to a property, and doing ng:repeat against it.
链接地址: http://www.djcxy.com/p/23122.html上一篇: 角度与角度2
下一篇: 如何使用ng循环由函数返回的项目