AngularJS:自动检测模型的变化

Question

假设我想在模型的值发生变化时自动运行一些代码(比如将数据保存到服务器).通过ng-change在每个控件上设置可能会改变模型的东西,这是唯一的方法吗？

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

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

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

Answer 1

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

默认$watch按引用进行比较.如果将第三个参数设置为$watchto true,则Angular会"浅"地观察对象的更改.对于数组,这意味着比较数组项,对于对象图,这意味着要观察属性.所以这应该做你想要的:

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

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

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

请注意,单词"shallow"用于描述比较而不是"深度",因为不遵循引用 - 例如,如果被监视对象包含属性值,该属性值是对另一个对象的引用,则不遵循该引用进行比较另一个对象.

Answer 2

如果你需要动态地根据它的状态(修改/未修改)设置表单元素的样式,或者测试某些值是否实际发生了变化,你可以使用我自己开发的以下模块:https: //github.com/betsol /角输入改性

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

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

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

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

你可以在这里找到模块的演示:http: //plnkr.co/edit/g2MDXv81OOBuGo6ORvdt？p = preview

干杯!