AngularJS で $scope.$watch と $scope.$apply を使用するにはどうすればいいですか? 質問する

AngularJS を理解するには、その仕組みを知っておく必要があります。

ダイジェストサイクルと$scope

まず第一に、AngularJS はいわゆるダイジェスト サイクルの概念を定義します。このサイクルはループと見なすことができ、その間に AngularJS はすべての によって監視されている$scopeすべての変数に変更があるかどうかを確認します。したがって、$scope.myVarコントローラーで を定義し、この変数が監視対象としてマークされてmyVarいる場合、ループの各反復での変更を監視するように AngularJS に暗黙的に指示していることになります。

当然、次のような疑問が湧いてきます。すべてが$scope監視対象になっているのでしょうか? 幸いなことに、そうではありません。 内のすべてのオブジェクトの変更を監視すると$scope、ダイジェスト ループの評価に非常に長い時間がかかり、パフォーマンスの問題にすぐに直面することになります。そのため、AngularJS チームは、変数を$scope監視対象として宣言する 2 つの方法を提供しました (以下を参照)。

$watchは$scopeの変更を監視するのに役立ちます

$scope変数を監視対象として宣言する方法は 2 つあります。

1. テンプレート内で式を使用して<span>{{myVar}}</span>
2. $watchサービス経由で手動で追加する

広告 1) これは最も一般的なシナリオであり、これまでにも見たことがあると思いますが、バックグラウンドでウォッチが作成されたことをご存知なかったでしょう。はい、作成されました! AngularJS ディレクティブ (などng-repeat) を使用しても、暗黙的なウォッチを作成できます。

広告 2) これは、独自のウォッチを作成する方法です。$watchサービスは、ウォッチに添付された値が$scope変更されたときにコードを実行するのに役立ちます。 めったに使用されませんが、役立つ場合があります。 たとえば、「myVar」が変更されるたびにコードを実行する場合は、次のようにします。

function MyController($scope) {

    $scope.myVar = 1;

    $scope.$watch('myVar', function() {
        alert('hey, myVar has changed!');
    });

    $scope.buttonClicked = function() {
        $scope.myVar = 2; // This will trigger $watch expression to kick in
    };
}