[解決済み] AngularJSで$scope.$watchと$scope.$applyを使用するにはどうすればよいですか？

質問

の使い方がわかりません。 $scope.$watch と $scope.$apply . 公式ドキュメントは参考にならない。

具体的にわからないこと

• DOMに接続されているのでしょうか？
• DOMの変更をモデルに反映させるには？
• 両者の接続ポイントは？

試してみた このチュートリアル を理解する必要があります。 $watch と $apply を、当然といえば当然なのですが。

どのような $apply と $watch また、それらを適切に使用するにはどうしたらよいでしょうか？

どのように解決するのですか？

AngularJSを理解するためには、AngularJSの仕組みについて知っている必要があります。

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

まず何よりも、AngularJSでは、いわゆる ダイジェストサイクル . このサイクルはループと考えることができ、その間AngularJSはすべての変数に変更があるかどうかをチェックします。 見る すべての $scope s. ですから、もし $scope.myVar がコントローラに定義されており、この変数が 監視対象 の変更を監視するように暗黙のうちにAngularJSに伝えていることになります。 myVar をループの各反復で使用します。

自然なフォローアップの質問でしょう。すべては $scope 監視されている？幸いなことに、そうではありません。もし、あなたの $scope となると、ダイジェスト・ループの評価に時間がかかり、すぐにパフォーマンスの問題に直面することになります。そのため、AngularJSチームはいくつかの $scope 変数が監視されていることを示します(下記参照)。

watch は、$scope の変更をリッスンするのに役立ちます。

を宣言する方法は2つあります。 $scope 変数が監視されていることを示します。

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
    };
}

applyは、変更をダイジェストサイクルに統合することができます。

を考えることができます。 $apply の機能は、統合メカニズムとして . ご存知のように、ある部分を変更するたびに に接続されたウォッチ変数が $scope オブジェクトに直接アクセスすると、AngularJSはその変更が起こったことを知ることができます。これは、AngularJSがそのような変更を監視することをすでに知っているからです。そのため、もしフレームワークによって管理されているコードで変更が発生した場合、ダイジェストサイクルは継続されます。

しかし、時には AngularJSの世界の外で値を変更する。 で、その変更が正常に伝搬されることを確認します。 次のようなことを考えてみましょう。 $scope.myVar の値を変更し、その値をjQueryの $.ajax() ハンドラです。これは将来のある時点で起こることです。AngularJSは、jQueryを待つように指示されていないので、これが起こるのを待つことはできません。

これに取り組むために $apply が導入されました。これは、消化サイクルを明示的に開始させるものです。しかし、これはデータをAngularJSに移行する（他のフレームワークと統合する）ためにのみ使うべきで、通常のAngularJSのコードと組み合わせてこのメソッドを使うことはできません。

これらはすべて、DOMとどのように関係しているのでしょうか？

さて、ここまで分かったら、もう一度チュートリアルに従ったほうがいいでしょう。ダイジェスト・サイクルは、UIとJavaScriptのコードが常に同期していることを確認するために、すべての $scope は、何も変化がない限り もしダイジェスト・ループの中でこれ以上変化が起こらなかったら、それは終了したとみなされます。

にオブジェクトをアタッチすることができます。 $scope オブジェクトを明示的にコントローラで宣言するか、あるいは {{expression}} フォームを直接ビューで使用します。

さらに読む

• AngularJSを作る、パート1：スコープとダイジェスト