AngularJS:自动检测模型的变化

AngularJS : automatically detect change in model

本文关键字：变化 模型 自动检测 AngularJS      更新时间：2023-09-26

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

也就是说，有了视图，事情就会随着模型的改变而改变，而不必显式地连接任何东西。是否有类似于能够运行保存到服务器的代码?就像

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

就像你可能看到的backbone

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

默认$watch通过引用进行比较。如果你把第三个参数设置为$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

干杯!

检测单个模型中的更改

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

检测多个模型中的变更

$scope.$watchCollection('[model1, model2, model3]', function () {
    //...
}, true);
相关文章：