Angular データ バインディング メカニズムの使用方法

今回は、Angular データ バインディング メカニズムの使用方法と、Angular データ バインディング メカニズムを使用する際の注意点について説明します。以下は実際のケースです。

1. Angular.js はブラウザのイベント ループを拡張します

ブラウザはユーザー インタラクションなどのイベントを待ち続けます。 タグに文字を入力すると、このイベントのコールバック関数は、それに含まれる DOM 操作を JS インタープリターで実行し、実行が完了すると、それに応じてブラウザーが DOM を変更します。 Angular はこのイベント ループを拡張し、場合によっては Angular コンテキストの実行環境になります。

2.$watch list

$watchは、モデルの変更を検出できます。データの一部がビューにバインドされるたびに、対応する $watch が $watch キューに挿入されます。例は次のとおりです:

controller.js:

app.controller('MainCtrl', function($scope) {
 $scope.people = [...]; // 假设长度为10
});

index.html:

<ul>
 <li ng-repeat="person in people">
   {{person.name}} - {{person.age}}
 </li>
</ul>

ここで、 ng-repeat は 1 つの $watch を生成し、各人は 2 つの $watches を生成します。合計は (1+2*10) です。 21ドルウォッチ。 $watch の生成フェーズは、テンプレートの読み込みが完了したとき、つまりリンクフェーズです。 (Angular はコンパイルとリンクのフェーズに分かれています)、Angular は各ディレクティブを検索し (上記の例では、ng-repeat と {{}} は両方ともディレクティブに属します)、各 $watch を生成します。

3.$digest ループ

ブラウザが角度コンテキストに関連するイベントを受信すると、$digest ループがトリガーされます。これは 2 つの小さなループで構成され、1 つは evalAsync キューを処理し、もう 1 つは $watch キューを処理します。 $digest が循環すると、$watch キューを走査してデータが更新されたかどうかを確認します。この走査はダーティ チェックインと呼ばれます。$watch が更新されたことが検出されると、すべてが完了するまで新しいダーティ チェックがトリガーされます。 $watch は更新されません。これにより、各モデルが変更されないことが保証されます。

ダーティチェックが10回を超えると、無限ループを防ぐために例外がスローされます。 $digest ループが終了すると、それに応じて DOM が変更されます。実際、$digest の文字通りの意味は、すべての栄養素 ($watch の変化) を徐々に吸収する「消化」のプロセスに似ています。

4. $apply を通じて angular コンテキストに入る

$apply は、ng-model などの angualr 独自のディレクティブを使用してイベントをカプセル化します。 $適用真ん中。たとえば、ng-model="name" の入力ボックスに文字「w」を入力すると、イベントは $apply("name='w';") を呼び出して、$scope でのデータ更新を完了します。

サードパーティライブラリを呼び出すときのデータバインディング

angular で jquery を呼び出す場合、jquery によってバインドされたデータは更新できません。これは、jquery が $apply を呼び出さず、イベントが angular コンテキストに入らないため、$digest が実行されないためです。処刑されている。例は次のとおりです。

app.js

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

この例では、要素がクリックされるたびに、count1 と count2 は 1 ずつ増加することが期待されますが、実際には増加しません。実際には $scope(ViewModel) が変更されましたが、$digest は強制されません。クリック イベントを次のように変更します。

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

$apply を呼び出すことで期待が達成されます。

5. 概要

angular イベント バインド メカニズムは次のとおりです:

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、他の関連記事に注目してください。 PHP中国語ウェブサイトで！

推奨読書:

jQuery スクロール バー美化プラグイン nicescroll の使用方法

json オブジェクトを並べ替えて同じ ID データを削除する方法

以上がAngular データ バインディング メカニズムの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。