Question

我尝试使用过滤器| filter: {pro: value}，但我有一个非常奇怪的错误：Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting! ...

在我的控制器中，我只有$scope.slots = […]。

我的观点非常简单：<div time-slots="slots | filter: {day:1}"></div>。

我的指示只是templateUrl: 'time-slot.html', restrict: 'A', scope: { timeSlots: '=' }。

我完全迷失了这个错误......我不明白我的代码有什么问题。这是plunker

我做错了吗？

Answer 1

您使用以下组合创建了无限的$digest序列：

具有=绑定的隔离范围，
带有过滤器的表达式。

请注意，=绑定双向，并且过滤器的应用程序会创建新的集合。因此，发生以下情况：

过滤外部范围集合A，创建集合B，并将其传递到指令中。通过双向=绑定，它将重新设置在外部范围上，替换A。
过滤外部范围集合B，创建集合C，并将其传递到指令中。 ...
...

当AngularJS发现$digest正在四处转动并且还需要更多时，它会突然出现上述错误。

Answer 2

我无法解释发生了什么，但为了避免这个问题，您可以将之前过滤的值传递给您的指令

.controller('SettingsCtrl', function($scope, $filter){
    //$scope.slots = [.......]
    $scope.filtered = $filter('filter')($scope.slots,{day:1});
});

HTML：

<div time-slots="filtered"></div>

或者在指令中过滤它，例如以这种方式：

<div>
  <input ng-model="day">
  <div ng-repeat="slot in timeSlots | filter:{day:day}">
    <pre>{{slot|json}}</pre>

  </div>

</div>

http://plnkr.co/edit/JLfIuP9oVQ9cwo3i54UA?p=preview

或链接功能：

$scope.timeSlots= $filter('filter')($scope.timeSlots,{day:1});

使用过滤器时达到10 $ digest（）次迭代

2 个答案: