AngularJS：モデルの変更を自動的に検出

モデルの値が変更されるたびに、コードを自動的に実行する（サーバーにデータを保存するなど）ようにしたいとします。ng-changeモデルを変更する可能性のある各コントロールに何かを設定することによってこれを行う唯一の方法はありますか？

つまり、ビューを使用すると、明示的に何かを接続する必要なしにモデルが変更されると、物事が正しく変更されます。サーバーに保存するコードを実行できることに類似していますか？何かのようなもの

myModel.on('change', function() {
  $.post("/my-url", ...);
});

あなたがバックボーンのようなもので見るかもしれないように。

{{}}ng-modelやng-model を持つビューでは、Angularが$watch()舞台裏でesを設定しています。

デフォルトでは$watch、参照によって比較されます。3番目のパラメーターを$watchに設定するとtrue、Angularは代わりにオブジェクトの変更を "浅く"監視します。配列の場合、これは配列項目を比較することを意味し、オブジェクトマップの場合、これはプロパティを監視することを意味します。だからこれはあなたが望むことをするはずです：

$scope.$watch('myModel', function() { ... }, true);

更新：Angular v1.2では、このための新しいメソッド`$ watchCollection（）が追加されました。

$scope.$watchCollection('myModel', function() { ... });

「浅い」という単語は、参照が追跡されないため、「深い」ではなく比較を説明するために使用されることに注意してください。たとえば、監視対象のオブジェクトに別のオブジェクトへの参照であるプロパティ値が含まれている場合、その参照は比較されません。他のオブジェクト。

また、フォーム要素をその状態（変更済み/未変更）に従って動的にスタイル設定する必要がある場合、または一部の値が実際に変更されたかどうかをテストする必要がある場合は、自分で開発した次のモジュールを使用できます：https : //github.com/betsol / angular-input-modified

追加のプロパティとメソッドをフォームとその子要素に追加します。これを使用すると、一部の要素に新しいデータが含まれているかどうかをテストしたり、フォーム全体に新しい未保存のデータがあるかどうかをテストしたりできます。

次の監視を設定できます。$scope.$watch('myForm.modified', handler)フォームエレメントに実際に新しいデータが含まれている場合、または初期状態に戻された場合、ハンドラーが呼び出されます。

また、modified個々のフォーム要素のプロパティを使用して、AJAX呼び出しを介してサーバーに送信されるデータの量を実際に減らすことができます。変更されていないデータを送信する必要はありません。

おまけとして、フォームのreset()メソッドの呼び出しによってフォームを初期状態に戻すことができます。

ここでモジュールのデモを見つけることができます：http : //plnkr.co/edit/g2MDXv81OOBuGo6ORvdt?p=preview

乾杯！