javascript - AngularJS：自动检测模型的变化

Question

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

即，对于视图，事情会随着模型的改变而改变，而无需显式地连接任何东西。有没有类似的方法可以运行保存到服务器的代码？就像是

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

就像你可能会看到骨干之类的东西。

Answer 1

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

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

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

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

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

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

Answer 2

如果您需要根据表单元素的状态（已修改/未修改）动态设置表单元素的样式或测试某些值是否实际更改，您可以使用我自己开发的以下模块： https ://github.com/betsol /角度输入修改

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

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

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

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

您可以在此处找到该模块的演示：http: //plnkr.co/edit/g2MDXv81OOBuGo6ORvdt ?p=preview

干杯!

Answer 3

检测单个模型中的变化

$scope.$watchCollection('model1', function () {
    //...
}, true);

检测多个模型中的变化

$scope.$watchCollection('[model1, model2, model3]', function () {
    //...
}, true);