angularjs 指令 : $rootScope:infdig error

Question

我正在尝试使用 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>

这是我的分页指令:

app.directive('pagination', function(){
  return {
    restrict: 'A',
    templateUrl: 'partials/pagination.html',
    scope: {
      data: '=data',
      limit: '=limit'
    }
  }
})

没有分页指令，一切都很好。然而，一旦我加载页面，我的新指令就会得到一个 $rootScope:infdig我不明白的错误，因为该指令没有做任何操作可能会导致无限循环的数据。
这里有什么问题，我该如何解决？谢谢!

更新:
这是 Controller 和资源。
Controller :

usersModule.controller('usersController',
  function ($scope, Users) {
    function init(){
      $scope.users = Users.get();
    }
    init();
})

资源(从 REST API 以数组形式获取用户):

app.factory('Users', function($resource) {
  return $resource('http://myrestapi.tld/users', null,{
       'get': { method:'GET', isArray: true, cache: true }
   });
});

更新 2

这是一个演示: http://plnkr.co/edit/9GCE3Kzf21a7l10GFPmy?p=preview
只需在左侧输入中输入一个字母(例如“f”)。

Answer 1

问题不在指令内，而是在指令创建的 $watch 内。
当您将 filtersUsers 发送到指令时，指令会创建以下行:

$scope.$watch("filteredUsers", function() {
    // Directive Code...
});

请注意以下示例中我们如何在没有指令的情况下复制它:
http://plnkr.co/edit/uRj19PyXkvnLNyh5iY0j

发生这种情况的原因是每次摘要运行时您都在更改过滤用户(因为您将分配放在 ng-repeat 语句中)。

要解决此问题，您可以考虑使用 $watch 的额外参数“true”来监视和过滤 Controller 中的数组:

$scope.$watch("users | orderBy:order:reverse | filter:filter.user", function(newVal) {
    $scope.filteredUsers = newVal;
}, true);

您可以在此处查看解决方案:
http://plnkr.co/edit/stxqBtzLsGEXmsrv3Gp6

没有额外参数 (true) 的 $watch 将与对象进行简单的比较，并且由于您在每个摘要循环中创建一个新数组，因此对象将始终不同。
当您将 true 参数传递给 $watch 函数时，这意味着它实际上会在再次运行 $watch 之前与返回的对象进行深度比较，因此即使您有具有相同数据的不同数组实例，它也会认为它们是平等的。