角度1.5のトラックオブジェクトの変更

Question

角度1.5（コンポーネントあり）のアプリがあります。私がやりたい何

<input class="field" ng-model="model.user.firstName" /> 

は、ユーザーが行ったときに追跡することです：

model.user = { 
    firstName: 'John', 
    lastName: 'Smith' 
} 

はその後、マークアップで、私はとしてそれを使用する：としてのコンポーネントの一つで、私は地元のオブジェクトが定義されていますこのフィールドに変更してイベントを記録します。私は時間をかけてさまざまな選択肢を検討しましたが、コンポーネントを使用するときの示唆されたアプローチが何であるか尋ねました。これは私がこれまでに見つけたものです：

• $ watch（...） - これは古い値と新しい値が得られるのでうまくいきますが、この方法はお勧めできません。
• $ onChanges - ローカルオブジェクトなので、これは機能しません。
• $ doCheck - これは機能する可能性がありますが、変更されたオブジェクトに関する情報は得られません。以前の値を手動で追跡する必要があります。
• ng-change - これはうまくいくが、私は多くのフィールドを持ち、マークアップを維持するのは少し難しくなるかもしれない。

Telerikの剣道MVVMのようなアプローチを探しています。ここでは、任意のオブジェクトの変更イベントを関数にバインドし、変更されたフィールド、古い値、新しい値を取得できます。このアプローチの美しさは、オブジェクトが変更された場合でもコードを変更する必要はなく、変更イベントはコードを記述することなく新しいフィールドを取得するということです。清潔でメンテナンスが簡単です。

これは角度1.5のコンポーネントで可能ですか？もしそうなら、推奨されるアプローチは何ですか？

ありがとうございます。

Answer 1

@CSharkが示唆しているように、ng-change方法が最良の選択肢でした。マークアップでそれはそれほど冗長に保つために、私はNG-モデルのオプションを注入し、NG-変更属性カスタム属性のディレクティブを作成：

：私は私のモデルでは

module.directive('inputChanged', function ($compile) { 
 
     function link(scope, element, attrs) { 
 
      var field = attrs.ngModel; 
 
      if (field) { 
 
       element.removeAttr('input-changed'); 
 
       element.attr('ng-model-options', "{ updateOn: 'blur' }"); 
 
       var fn = "model.changed('" + field + "', " + field + ", '{{ " + field + " }}')"; 
 
       element.attr('ng-change', fn); 
 

 
       $compile(element)(scope); 
 
      }  
 
     } 
 

 
     return { 
 
      restrict: 'A', 
 
      link: link, 
 
      terminal: true, 
 
      priority: 1000 
 
     } 
 
    });

model.changed = function (field, newValue, oldValue) { 
 
    //log the change 
 
}

これが完了すると、ちょうど入力ちゃんを追加ng-model属性を持つ要素にged属性を追加します。例えば。

<input ng-model="model.user.firstName.value" input-changed />

ユーザーはNG-モデルのオプションを設定することにより、変更をコミットした後、私は唯一の変更をキャプチャしています注意してください。また、古い値と新しい値の両方をmodel.changed関数に渡しています。このようにして、実際に$ watchを使わずに$ watch-like機能を実現できます。

これが最適な解決策であるかどうかはわかりませんが、私のシナリオではそうなります。