javascript - ngchange - ng checked checkbox angularjs




$ watch-ng-change、ng-checkedなどのAngular トリガーの変更 (3)

現在、いくつかの方法でデータの変更を監視できます。 $watchを使ってモデルの変更を引き起こす可能性があり、要素にディレクティブを追加したり、いくつかのアクションをバインドすることができます。

多くの場合、ちょっと混乱します。私は興味があります。これはそれぞれの変種の長所と短所です。また、 $watchバインディングを使用するの$watchいつですか?


ng-changeようなディレクティブは、DOMへのデータバインディングに使用されます。 $watchはあなたのJSコードで変更を待ち受けるために使われます。

DOMをスコープの変更の影響を受ける必要がある場合、またはDOMの変更(たとえばフィールド選択)をスコープに適用する必要がある場合は、ディレクティブを使用します。

スコープの変更、たとえばajaxリクエストからJavaScriptアクションをトリガする必要がある場合は、コントローラ(またはサービス)で$watchを使用して変更をリッスンします。


ngChangeディレクティブのコード:

var ngChangeDirective = valueFn({
  require: 'ngModel',
  link: function(scope, element, attr, ctrl) {
    ctrl.$viewChangeListeners.push(function() {
      scope.$eval(attr.ngChange);
    });
  }
});

ngChangengChangeのコントローラをngModelとし、ビューが変更されたときにバインドされた式を実行します。

だから、ヘルパーのように、[$ watch 'model'、 'stuff stuff]のような面倒な作業をしないようにすることができます。

パフォーマンス面では、心配する必要がある$watch式が1つ少なくなります。


双方向データバインディングが必要な場合は、 ng-model使用します。 これは、モデルからビュー、およびビューからモデルへの変更を2つの方法でプッシュします。 ただし、一方向のデータバインディングをビューからモデルにする場合は、 ng-change使用します。 モデルからビューへの単純な一方向データバインディングが必要な場合は、式{{ like_this }}使用できます。 しかし、モデルがビューでレンダリングされる方法をより詳細に制御したい場合や、モデルをビュー以外のものにバインドする場合は、 $watch使用します。





angularjs-directive