49

現在、いくつかの方法でデータの変更を監視できます。でモデルの変更をトリガーし$watch、要素にディレクティブを追加して、いくつかのアクションをそれにバインドできます。

多くの場合、少し混乱するので、各バリアントの長所と短所、$watchバインディングをいつ使用する必要があるか、ディレクティブがng-change?

4

4 に答える 4

61

$watchとngChangeはまったく異なる用途があります。

スコープで定義されたモデルがあるとしましょう:

$scope.myModel = [
    {
        "foo":"bar"
    }
];

変更が発生するたびに何かをしたい場合は、myModel次を使用し$watchます。

$scope.$watch("myModel", function(newValue, oldValue){
    // do something
});

ngChangeユーザーが入力を変更したときに、指定された式を評価するディレクティブです。

<select ng-model="selectedOption" ng-options="option for option in options" 
ng-change="myModel=selectedOption"></select>

ngChangeつまり、通常は何らかの HTML 要素にバインドします。while$watchはモデル用です。

于 2013-09-25T14:21:16.010 に答える
16

ngChange指令コード:

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

ngChangeビューが変更されたときに、コントローラーが必要であり、ngModelバインドされた式を実行します。

つまり、[$watch 'model' then do stuff] のような面倒な作業を省くヘルパーのようなものです。

パフォーマンスの観点では、$watch心配する式が 1 つ少なくなります。

于 2013-09-25T15:36:41.257 に答える
8

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

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

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

于 2013-09-25T14:14:56.200 に答える