Question

假设我想在模型的值发生变化时自动运行一些代码（比如将数据保存到服务器）。是否可以通过在每个可能改变模型的控件上设置ng-change之类的东西来实现此目的？

即，通过视图，当模型被更改时，事情会发生变化，而不必明确地将任何内容挂起。是否能够运行保存到服务器的代码？像

这样的东西

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

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

Answer 1

在使用{{}}和/或ng-model的视图中，Angular会在幕后为您设置$watch()。

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

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

更新：Angular v1.2为此添加了一种新方法，`$watchCollection()：

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

请注意，单词“shallow”用于描述比较而不是“深度”，因为不遵循引用 - 例如，如果被监视对象包含属性值，该属性值是对另一个对象的引用，则该引用不是然后比较另一个对象。

Answer 2

如果你需要动态地根据状态（修改/未修改）设置表单元素的样式，或者测试某些值是否实际发生了变化，你可以使用我自己开发的以下模块： https://github.com/betsol/angular-input-modified

它为表单及其子元素添加了其他属性和方法。有了它，您可以测试某个元素是否包含新数据，甚至可以测试整个表单是否包含新的未保存数据。

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

此外，您可以使用单个表单元素的modified属性来实际减少通过AJAX调用发送到服务器的数据量。无需发送未更改的数据。

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

干杯！