AnglarJs双方向バインディングの原理（データーバインディングのメカニズム）を簡単に話します。

じゃ、双方向バインディングとは何ですか？簡単に説明します。
まず私たちはデータバインディングを理解しなければならない。私たちが見たウェブサイトのページは、データとデザインの二つの部分から構成されています。ブラウザで理解できる言語にデザインを変換するということは、htmlとcssの主な仕事です。データをページに表示し、ユーザーの操作や対応するページ反応などの一定のインタラクティブ効果があるということは、jsが主に完成した仕事である。データを更新するたびにページを更新することはできません。バックエンドに関連データを要求し、更新なしでページを更新することが多いです。データを更新すると、ページ上の該当の位置にも自動的に対応する修正ができます。データバインディングです。
以前の開発モードでは、このステップは一般的にjqによってDOM構造を操作して、ページを更新する。しかし、このように大量のコードと大量の操作がもたらされます。開始時に、バックエンドから取得したデータからページ上に必要な操作が確定されています。データが変更されると、ページの関連内容が自動的に変化します。これによって、フロントエンドエンジニアの開発が大幅に便利になります。新しいフレームの中で、データを監視することによって、変化がすでに書かれている規則に基づいてページを修正することを発見し、データバインディングを実現しました。データバインディングはM（model，データ）がVM（model-view，データとページの間の変換規則）を介してV（view）に修正されることが分かる。
双方向結合は逆方向の道を増やすことである。ユーザーがページを操作する（例えば、Inputに値を入力する）場合、データは速やかに変化し、データの変化に応じて、ページの別のところでも対応するように修正されます。よくある例として、タオバオの中のショッピングカートは商品の数が変わった時、商品の価格もすぐに変わります。これによりV―M―VM―Vの双方向結合が実現された。
AnglarJsはscopeモデルのためにモニターキューを設置し、データの変化をモニターしてviewを更新します。一つのものをviewに結びつけるたびに、AnglarJsはドルウォッチの列にドルウォッチを挿入して、監視しているmodelに変化があるかどうかを確認します。ブラウザがangglar contextで処理できるイベントを受信すると、digestループがトリガされます。digestはすべての$watchを巡回します。したがって、DOMを更新する。
$ウォッチ
これは私たちの観察者モードと似ています。現在のスコープの下で、監視カメラを作成します。ウォッチとモニタを作成します。
controller.js

app.controller('MainCtrl', function($scope) {
 $scope.Hello = "Hello";
 $scope.world = "World";
});

index.

<div>{{Hello}}</div>

ここで、私たちは2つの変数をscopeに追加しても、UIに一つだけ結合されていますので、ここでは一つのwatchしか生成されません。
$digest
ブラウザがangglar contextで処理できるイベントを受信すると、digestループがトリガされます。digestは私たちの$watchを遍歴します。もし変化がないなら、この循環検査は停止します。少なくとも一つの更新があれば、このサイクルは再び触発されます。このようにして、各モデルはもう変化しないと保証できます。これが汚れ検査の仕組みです。
controller.js

app.controller('MainCtrl', function() {
 $scope.name = "Foo";

 $scope.changeFoo = function() {
  $scope.name = "Bar";
 }
});

index.js

<div>{{ name }}</div>
<button ng-click="changeFoo()">Change the name</button>

ボタンを押すと

です。

ブラウザはイベントを受信して、angglar contextに入ります。

ドルdigestサイクルは実行を開始し、各$watchが変化するかどうかを調べる。

$scope.nameのウォッチのために変更が報告されました。これは強制的にもう一度$digestサイクルを実行します。

の新しい$digestサイクルは変化を検出していません。

は、$scope.nameの新しい値に対応する部分のDOMを更新する。

$appy
apply UIの更新に直接理解できます。もしイベントがトリガされたら、Anglar contextに入ります。呼び出しがないと入れません。その後のdigest検出メカニズムは起動しません。

app.directive('clickable', function() {
 return {
  restrict: "E",
  scope: {
  foo: '='
  },
  template: '<ul style="background-color: lightblue"><li>{{foo}}</li></ul>',
  link: function(scope, element, attrs) {
  element.bind('click', function() {
   scope.foo++;
   console.log(scope.foo);
  });
  }
 }
});

私たちがclickableコマンドを呼び出すと、fooの値が増加していますが、画面に表示されている内容は変わりません。digest汚れ検出機構は触発されていません。fooのwatchを検出するのは実行されていません。
$apply()メソッドの2つの形態
1）無参

$scope.$apply();

element.bind('click', function() {
 scope.foo++;
 //if error
 scope.$apply();
});

このような形式を使うと、scope.$appyの前にプログラムに異常が発生したら、scope.$appyは実行されません。インターフェースは更新されません。
2）有参

$scope.$apply(function(){
 ...
})

element.bind('click', function() {
 scope.$apply(function() {
  scope.foo++;
 });
})

このような形で、後に異常が発生してもデータは更新されます。
AnglarJSでは$ウォッチを使用します。
よく使う使い方：

$scope.name = 'Hello';
$scope.$watch('name', function(newValue, oldValue) {
 if (newValue === oldValue) { return; } 
 $scope.updated++;
});

$watch()に導入された第二のパラメータは、nameの値が変化したときに呼び出されるコールバック関数です。
傍受する対象が対象である場合は、3番目のパラメータが必要です。

$scope.data.name = 'Hello';
$scope.$watch('data', function(newValue, oldValue) {
 if (newValue === oldValue) { return; } 
 $scope.updated++;
}, true);

比較を表すのは、参照ではなく対象の値です。3番目のパラメータtrueを追加しないと、data.nameが変化したときには、同じ参照であるため、対応する動作はトリガされません。
締め括りをつける
1）ページには$scope変数だけが結びつけられています。
2)$appyはイベントがangglar contextに入るかどうかを決定します。
3)$digest循環検査modelは最低2回、最大10回（10回以上の例外を投げて、無限検査を防止する）
4）AnglarJsが持っている命令はすでに$applyを実現しました。ですから、私達が追加で作成する必要はありません。
5）カスタムコマンドの場合は、functionパラメータ付きのapplyを推奨します。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。