ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。