AngularJS实现一次监听多个值发生的变化

发布于 2017-05-06 22:25:14 | 157 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的AngularJS教程，程序狗速度看过来！

AngularJS 前端JS框架

一、$watch简单使用

$watch是一个scope函数，用于监听模型变化，当你的模型部分发生变化时它会通知你。

$watch(watchExpression, listener, objectEquality);

每个参数的说明如下：

watchExpression：监听的对象，它可以是一个angular表达式如'name',或函数如function(){return $scope.name} 。

listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数：newValue(新值), oldValue(旧值), scope(作用域的引用)

objectEquality：是否深度监听，如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化. 如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值, 那么你应该使用它

举个栗子：

$scope.name = 'hello';

var watch = $scope.$watch('name',function(newValue,oldValue, scope){

    console.log(newValue);

    console.log(oldValue);

});

$timeout(function(){

    $scope.name = "world";

},1000);

二、监听多个值的变化

大家通常遇到的情况为通过$watch()一次监听一个值的变化，当然这种时候满足绝大部分情况。但是通过阅读官网对于$watch()的解释，$watch()还有第三个参数，第三个参数是一个布尔类型，表示是否深度监听，深度监听的例子就是是否进行比较对象的属性。

这样我们就可以实现一次监听多个值的变化。

示例代码

var app=angular.module("watchApp",[])
      .controller("watchController",["$scope",function($scope){
         $scope.object={};
         $scope.object.one=$scope.one;
         $scope.object.one=$scope.one;
         $scope.$watch("object",function(){
            .....
          },true);
      }])

总结

以上就是关于AngularJS如何一次监听多个值发生变化的全部内容，大家都学会了吗？希望这篇文章的内容对大家的学习和工作能有所帮助，如果有疑问可以留言交流，谢谢大家对phperz的支持。