AngularJs で双方向バインディングを使用する方法

この記事では主に AngularJs の双方向バインディングの原理 (データ バインディングの仕組み) を紹介しますが、編集者はこれが非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう

それでは、双方向バインディングとは何でしょうか? 以下で簡単に説明しましょう。

まず、データバインディングを理解する必要があります。私たちが目にするウェブサイトのページは、データとデザインの 2 つの部分で構成されています。デザインをブラウザが理解できる言語に変換することは、HTML と CSS が主に行うことです。ページ上にデータを表示し、特定のインタラクティブな効果 (クリックやその他のユーザー操作や対応するページの反応など) をもたらすのが js の主な仕事です。多くの場合、データを更新するたびにページを更新 (リクエストの取得) することはできず、代わりにバックエンドから関連データをリクエストし、更新せずにロードすることでページを更新します (リクエストの送信)。データが更新された後、ページ上の対応する場所に対応する変更が自動的に行われます。これがデータ バインディングです。

以前の開発モデルでは、このステップでは通常 jq を使用して DOM 構造を操作し、ページを更新します。ただし、これには多くのコードと多くの操作が必要になります。最初にバックエンドから取得したデータからページ上で実行する必要がある操作を判断できれば、データが変化したときにページ内の関連コンテンツも自動的に変更され、フロントエンドの開発が大幅に容易になります。末端のエンジニア。新しいフレームワーク（angualr、react、vueなど）では、データを監視することで変更があれば、記述されたルールに従ってページを修正することでデータバインディングを実現します。データ バインディングは、VM (モデル ビュー、データとページ間の変換規則) を介して M (モデル、データ) を V (ビュー) に変更したものであることがわかります。

双方向バインディングにより、逆パスが追加されます。ユーザーがページを操作すると (入力に値を入力するなど)、データは時間の経過とともに変更される可能性があり、データの変更に応じて、ページの別の部分に対応する変更が行われます。一般的な例は、淘宝網のショッピング カートです。商品の数量が変化すると、商品の価格も変化する可能性があります。これにより、V-M-VM-V の双方向バインディングが実現します。

AngularJs は、スコープ モデルにリスニング キューを設定して、データの変更をリッスンし、ビューを更新します。何かをビュー (html) にバインドするたびに、AngularJs は $watch キューに $watch を挿入して、監視しているモデルに変更があるかどうかを検出します。 $digest ループは、角度コンテキストで処理できるイベントをブラウザーが受信したときに起動します。 $digest はすべての $watch を反復処理します。したがって、DOM が更新されます。

$watch

これは、現在のスコープ $scope の下で、すべての $watches を管理する責任を負う $watchers のオブザーバー パターンに似ています。それを UI にバインドすると、 $watch が自動的に作成され、$watchers に配置されます。

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

<p>{{Hello}}</p>

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

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

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

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

$scope.$apply();

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

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

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

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

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