なぜこの無限$ダイジェストループエラーが発生しますか？

この簡単なデモで無限の$ダイジェストループエラーが発生する理由を理解できません。私はofficial documentationのこれらのループについて読んだことがありますが、なぜこのデモがエラーを引き起こすのか分かりません。

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script> 
<script> 
    var TestApp = angular.module("TestApp", []); 

    TestApp.controller("TestCtrl", function ($scope) { 
     $scope.Counter = 0; 
     $scope.IncrementCounter = function() { 
     $scope.Counter+=1; 
     return true 
     } 
    }); 
</script> 
<body ng-app='TestApp'> 
    <div ng-controller='TestCtrl'> 
    <label> 
     Number of times <code>$scope.IncrementCounter()</code> 
     has been invoked: {{ Counter }} 
    </label> 
    <input type="hidden" value="{{ IncrementCounter() === true }}" /> 
    </div> 
</body>

モデル全体がダイジェスト・サイクルを通過させることなく、$scope関数内から$scope変数をインクリメントする方法はありませんか？

出典

2017-01-20 Jacob Stamm

監督部。ブール値を返すように修正しましたが、それは無関係の問題でした。問題は依然として続きます。 –

@AlonEitanスタックオーバーフローのガイドラインに示されているように、ダウンボートの代わりに（もしそうでなければ、心配しなければ）、私は批判や解決策を理解するだろう。 –

私はdownvoted私ではなかったことを証明するためにupvoted - 角度式で関数を呼び出すことを避けてください、これをデバッグする - '{{IncrementCounter（）=== true}}'部分を削除し、まだエラーが発生します –

問題は、ビュー内のバインディング内からIncrementCounter()関数を呼び出すためです。 $digestサイクルAngularは{{ }}の角かっこで囲まれた任意の関数を実行し、IncrementCounter()関数はスコープ$scope.Counterの値を変更し、別の$ダイジェストサイクルを開始します。このプロセスは継続的に繰り返されます。

コントローラですべてを実行し、スコープに保持されている値を表示するためにのみビューを使用する必要があります。あなたは、例えば、これは、必要に応じて遅延を作成するために、$タイムアウトサービスを使用して、自分自身を呼び出す関数を使用して行うことができます：

var TestApp = angular.module("TestApp", []); 

TestApp.controller("TestCtrl", function ($scope, $timeout) { 

    var init = function() { 
    $scope.counter = 0; 
    incrementCounter(); 
    }; 

    var incrementCounter = function() { 
     $scope.counter++; 
     $timeout(function() { 
      incrementCounter(); 
     }, 1000); 
    }; 

    init(); 
});

上記のコードでは、あなたのビューはその後になります私の上

<html> 
    <head> 
    <title>AngularJS Function Invocation Tester</title> 
    </head> 
    <body ng-app='TestApp'> 
     <h2>AngularJS Function Invocation Tester</h2> 
     <div ng-controller='TestCtrl'> 
     <label> 
      Number of times <code>$scope.IncrementCounter()</code> 
      has been invoked: <span class="counter">{{ counter }}</span> 
     </label> 
     </div> 
    </body> 
</html>

出典

2017-01-20 22:05:15

これは本当に問題の中心にあるのではないかと心配しています。 '' $ scope 'の変数を変更しても問題は解決されません（実際には[この変更されたデモ]（https://codepen.io/stamminator/pen/MJpdrQ）で、問題は実際に倍増しました！、私が実際にここでデバッグしようとしているのは、私は無限ループなしで過去に何度も働いてきました。これらのデモのいずれかが無限ループを開始する原因は何ですか？ –

この関数呼び出しのスコープを変更しているからです。 '// $ scope.Counter + = 1;'をコメントアウトすると、$ digestエラーなしで実行されます。それは動作しません（カウンタをインクリメントします）が、それは問題の原因を証明する、実行されます。 –

私のコメントにリンクしたデモをご覧ください。私はカウンター変数*をスコープの外側に移動しましたが、問題はまだ発生しています。 –

なぜこの無限$ダイジェストループエラーが発生しますか？

答えて

関連する問題