AngularJS - 达到 10 次 $digest() 迭代。中止答案

【问题标题】：AngularJS - 10 $digest() iterations reached. AbortingAngularJS - 达到 10 次 $digest() 迭代。中止
【发布时间】：2023-06-04 12:03:01
【问题描述】：

在我的 Angular 应用程序中，我显示了我直接从数据库加载的项目列表。我试图始终显示至少 20 个项目。用户可以过滤它们，所以当应用太多过滤器时，我想加载更多。

到目前为止，我的做法如下： HTML：

<section id="list" class="ease">
          <article class='myItems' ng-repeat="job in filteredList = (items | filter: country | filter: category | filter: position)">
                   Items
          </article>
</section>

JS（在我的控制器中）：

$scope.$watch('filteredList', function(newVal, oldVal){
    if(newVal !== oldVal){
        $log.info($scope.filteredList.length);
        // code to load more data
    }
});

但是我收到以下错误：

Error: 10 $digest() iterations reached. Aborting

我猜这是因为过滤列表更改太多次，所以角度阻塞了它。我该如何解决这个问题？

谢谢

【问题讨论】：

我想这里的问题将在加载更多数据的代码中的某个地方......你能分享那部分吗？
你能提供你的// code to load more data吗？这实际上一定是问题;)
实际上我有问题，即使我评论加载数据的代码

标签： javascript angularjs

【解决方案1】：

使用$scope.$watchCollection 而不是$scope.$watch，因为您的filteredList 是一个集合。

使用$scope.$watch 实际上会失败，因为您在每个消化循环上重建了引用，因此观察者循环并再次循环并达到消化限制。

Interesting article about the watching methods

【讨论】：

还有一个问题：如何等待页面完全加载才能使 $scope.$watchCollection 正常工作？非常感谢
这取决于items 在作用域上的发布方式。它要么在控制器实例化时发布，您可以在 $scope.items 的 filteredList 集合观察程序中添加条件。或者使用应用程序路由的resolve 属性。