angularjs指令：$ rootScope：infdig错误 [英] angularjs directive: $rootScope:infdig error
问题描述
我试图建立与angularjs 1.2.15一个分页指令：
I'm trying to build a pagination directive with angularjs 1.2.15:
这是我的看法：
<input type="text" ng-model="filter.user">
<input type="number" ng-model="filter.limit" ng-init="filter.limit=5">
<ul>
<li ng-repeat="user in (filteredUsers = (users | orderBy:order:reverse | filter:filter.user ) | limitTo: filter.limit)" ng-click="showDetails(user)">
{{user.id}} / {{user.firstname}} {{user.lastname}}
</li>
</ul>
<div pagination data='filteredUsers' limit='filter.limit'></div>
和这里是我的分页指令：
and here is my pagination directive:
app.directive('pagination', function(){
return {
restrict: 'A',
templateUrl: 'partials/pagination.html',
scope: {
data: '=data',
limit: '=limit'
}
}
})
一切工作完全正常无分页指令。然而，随着我的新指令，只要我加载页面，我收到了 $ rootScope：infdig 错误，我没有，因为指令没有做任何事情来操作数据理解可以在一个无限循环结束了。结果
这里有什么问题，我该怎么解决呢？谢谢！
Everything works perfectly fine without the pagination directive. However with my new directive as soon as I load the page I get a $rootScope:infdig error which I don't understand since the directive is not doing anything to manipulate data that could end up in an infinite loop.
What is the problem here and how can I solve it? Thanks!
更新：结果
这里是控制器和资源。结果
控制器：
Update:
Here are the controller and the resource.
Controller:
usersModule.controller('usersController',
function ($scope, Users) {
function init(){
$scope.users = Users.get();
}
init();
})
资源（得到用户如从REST API数组）：
Resource (gets users as an array from a REST API):
app.factory('Users', function($resource) {
return $resource('http://myrestapi.tld/users', null,{
'get': { method:'GET', isArray: true, cache: true }
});
});
更新2
下面是一个演示：<一href=\"http://plnkr.co/edit/9GCE3Kzf21a7l10GFPmy?p=$p$pview\">http://plnkr.co/edit/9GCE3Kzf21a7l10GFPmy?p=$p$pview
只是一个字母（例如F）输入到左输入。
Here is a demo: http://plnkr.co/edit/9GCE3Kzf21a7l10GFPmy?p=preview
Just type in a letter (e.g. "f") into the left input.
推荐答案
问题是不是指令中，它的内$观赏指令创建。
当您发送filteredUsers的指令，该指令将创建以下行：
The problem is not within the directive, it's within the $watch the directive creates. When you send filteredUsers to the directive, the directive creates the following line:
$scope.$watch("filteredUsers", function() {
// Directive Code...
});
在下面的例子中注意我们是如何重现它没有一个指令：
http://plnkr.co/edit/uRj19PyXkvnLNyh5iY0j
Notice in the following example how we reproduce it without a directive: http://plnkr.co/edit/uRj19PyXkvnLNyh5iY0j
它发生的原因是因为你正在改变filteredUsers每个摘要运行（因为你把NG-repeat语句转让）的时间。
The reason it happens is because you are changing filteredUsers every time a digest runs (since you put the assignment in the ng-repeat statement).
要解决这个问题，你可以考虑看，并为$手表额外的参数'真正的'过滤阵列控制器中的：
To fix this you might consider watching and filtering the array in the controller with the extra parameter 'true' for the $watch:
$scope.$watch("users | orderBy:order:reverse | filter:filter.user", function(newVal) {
$scope.filteredUsers = newVal;
}, true);
您可以在这里检查的解决方案：
http://plnkr.co/edit/stxqBtzLsGEXmsrv3Gp6
You can check the solution here: http://plnkr.co/edit/stxqBtzLsGEXmsrv3Gp6
没有额外的参数（真）$手表将做一个简单的比较对象，因为你创建的每个循环消化一个新的数组，对象将永远是不同的。
当你传递true参数到$手表的功能，这意味着它实际上做的比较深到再次运行$手表之前返回对象，所以即使你有阵列的不同实例有它会将相同的数据考虑他们平等的。
the $watch without the extra parameter (true) will do a simple comparison to the object, and since you create a new array in every digest loop, the object will always be different. When you're passing the true parameter to the $watch function, it means it will actually do deep comparison to the object that returns before running the $watch again, so even if you have different instances of arrays that has the same data it will consider them equal.
这篇关于angularjs指令：$ rootScope：infdig错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
