AngularJS：自动检测模型中的变化

假设我想做一些事情，比如自动运行一些代码（比如将数据保存到服务器），只要模型的值发生变化。 是唯一能做到这一点的方法是在每个控件上设置一些可能会改变模型的ng-change 。

也就是说，随着观点的发展，模型改变的时候事情就会改变，而不必明确地勾住任何东西。 有没有类似于能够运行保存到服务器的代码？ 就像是

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

就像你可能会看到像骨干一样的东西。

Answer 1

在{{}}和/或ng-model的视图中，Angular在幕后设置了$watch() es。

默认情况下$watch通过引用进行比较。 如果将第三个参数设置为$watch为true ，则Angular将改为“浅”，观察对象以进行更改。 对于数组来说，这意味着要比较数组项，对于对象映射，这意味着要看属性。 所以这应该做你想要的：

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

更新 ：Angular v1.2为此添加了一个新方法， `$ watchCollection（） ：

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

请注意，单词“浅”是用来描述比较，而不是“深”，因为没有遵循引用 – 例如，如果观看的对象包含一个属性值是对另一个对象的引用，该引用不被跟着比较另一个对象。

Answer 2

如果您需要根据dynamic状态（修改/未修改）dynamic设置表单元素，或者testing某些值是否已经实际更改，则可以使用由我自己开发的以下模块： https ： //github.com/betsol /angularinput改性

它将附加的属性和方法添加到表单，它是子元素。 有了它，你可以testing一些元素是否包含新的数据，甚至testing整个表单是否有新的未保存的数据。

您可以设置以下手表： $scope.$watch('myForm.modified', handler) ，如果某些表单元素实际上包含新数据或者将其转换为初始状态，则会调用您的处理程序。

另外，可以使用单个表单元素的modified属性来实际减less通过AJAX调用发送到服务器的数据量。 没有必要发送不变的数据。

作为奖励，您可以通过调用表单的reset()方法将表单还原为初始状态。

你可以在这里find模块的演示： http : //plnkr.co/edit/g2MDXv81OOBuGo6ORvdt?p=preview

干杯!