5

内部の angular.js がそのモデルが変更されたことを検出する方法と、この変更を処理するための一般的な角度ワークフローとは何か、興味深いです。つまり、モジュールの一部を変更した後、ページの次に実際に何が起こったのかということです。

4

1 に答える 1

0

これが私の理解です。私が間違っている場合は修正してください。これは双方向の情報共有です:)

実際に背後でどのように機能しているかを知っていれば、データバインディングは魔法ではありません。

変数にデータ バインディング機能を持たせるには、$watch メソッドを使用して登録する必要があります。

$scope.$watch('aVarModel', function(newValue, oldValue) {
  //update the DOM with newValue
});

$scope.$digest が呼び出されるたびに、$watch を介してバインドされたすべてのデータがチェックされます。Angular はスコープ内のすべての値をチェックするのではなく、 $watch メソッドを使用して登録された値のみをチェックすることに注意してください。モデルがウォッチャーを使用して登録されていない場合は、チェックされません。古い値と新しい値を比較して、変更があるかどうかを確認します。変更すると、リスナー関数 (watcher メソッドの 2 番目のパラメーター) が呼び出されます。

$watch を使用してスコープに変数を登録していないか、$digest を呼び出して変更を確認していないかを尋ねるかもしれませんが、それでもデータ バインディングが発生します。なんで？

AngularJS には、背後で実際に $digest メソッドを呼び出し、変数を監視する組み込みディレクティブが多数あり、作業がはるかに簡単になります。例えば：

<div ng-app ng-init="qty=1;cost=2">
  <b>Invoice:</b>
  <div>
    Quantity: <input type="number" min="0" ng-model="qty">
  </div>
  <div>
    Costs: <input type="number" min="0" ng-model="cost">
  </div>
  <div>
     <b>Total:</b> {{qty * cost | currency}}
  </div>
</div>

組み込みの ng-model ディレクティブは、実際には qty 変数と cost 変数のウォッチャーを登録し、知らないうちに値が変更されるたびに $scope.$digest を呼び出します。カスタム ディレクティブを作成できます

{{ }} 内のすべての式も、コンパイル段階で自動的に監視されます。そのため、アプリ内のどこでも値が変更されると変更されます。

于 2014-10-21T22:47:36.710 に答える