[解決済み] エラーです。10回の$digest()反復に達しました。動的なsortby述語で中断！？

質問

次のようなコードで、ユーザー名とスコアを繰り返し表示させています。

<div ng-controller="AngularCtrl" ng-app>
  <div ng-repeat="user in users | orderBy:predicate:reverse | limitTo:10">
    <div ng-init="user.score=user.id+1">
        {{user.name}} and {{user.score}}
    </div>
  </div>
</div>

そして、それに対応するangularコントローラ。

function AngularCtrl($scope) {
    $scope.predicate = 'score';
    $scope.reverse = true;
    $scope.users = [{id: 1, name: 'John'}, {id: 2, name: 'Ken'}, {id: 3, name: 'smith'}, {id: 4, name: 'kevin'}, {id: 5, name: 'bob'}, {id: 6, name: 'Dev'}, {id: 7, name: 'Joe'}, {id: 8, name: 'kevin'}, {id: 9, name: 'John'}, {id: 10, name: 'Ken'}, {id: 11, name: 'John'}, {id: 1, name: 'John'}, {id: 2, name: 'Ken'}, {id: 3, name: 'smith'}, {id: 4, name: 'kevin'}, {id: 5, name: 'bob'}, {id: 6, name: 'Dev'}, {id: 7, name: 'Joe'}, {id: 8, name: 'kevin'}, {id: 9, name: 'John'}, {id: 10, name: 'Ken'}]
}

上記のコードを実行すると Error: 10 $digest() iterations reached. 中止します! というエラーがコンソールに表示されました。

私は jsfiddle を使用します。

ソート述語はng-repeatの中だけで初期化され、オブジェクトの数に制限が適用されています。したがって、sortbyとlimitToの両方のウォッチャーを一緒に持つことがエラーの原因だと思います。

scope.reverseがfalse（スコアの昇順）であれば、エラーにはなりません。

何が間違っているのか、どなたか教えていただけませんか？ご協力をお願いします。

解決方法を教えてください。

こちらをご覧ください jsFiddle . (コードは基本的にあなたが投稿したものと同じですが、スクロールイベントをバインドするためにウィンドウの代わりに要素を使用しています)。

私が見る限りでは、投稿されたコードに問題はありません。あなたが言ったエラーは、通常、プロパティに対する変更のループを作成したときに発生します。たとえば、あるプロパティの変更を監視し、リスナーでそのプロパティの値を変更するような場合です。

$scope.$watch('users', function(value) {
  $scope.users = [];
});

この場合、エラーメッセージが表示されます。

Uncaught Error: 10 $digest() の反復処理に達しました。中止します!
ウォッチャー 直近の5回の反復処理で発生したもの： ...

あなたのコードにこのような状況がないことを確認してください。

を更新してください。

これはあなたの問題です。

<div ng-init="user.score=user.id+1"> 

レンダリング中にオブジェクトやモデルを変更してはいけません。そうしないと、新しいレンダリングが強制的に行われます（結果として ループ が発生し、その結果 'エラーです。10 $digest() イテレーションに達しました。中止します！' ).

モデルを更新したい場合は、コントローラかディレクティブで行い、決してビューでは行わないでください。 を使用しないことを推奨しています。 その ng-init このような事態を避けるために、正確に

テンプレートでngInitディレクティブを使用する（トイ/サンプルアプリのみ。 実際のアプリケーションには推奨しません)

以下は jsFiddle を、動作例とともにご紹介します。