当前位置：首页 > 资讯 > 技术文档

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

时间：2021-01-26 05:45 编辑：来源：阅读：
扫一扫，手机访问

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

[b]一、$watch简单使用[/b] [code]$watch[/code]是一个[code]scope[/code]函数，用于监听模型变化，当你的模型部分发生变化时它会通知你。

$watch(watchExpression, listener, objectEquality);

[b]每个参数的说明如下：[/b] [b]watchExpression：[/b]监听的对象，它可以是一个angular表达式如'name',或函数如[code]function(){return $scope.name} [/code]。 [b]listener:[/b]当[code]watchExpression[/code]变化时会被调用的函数或者表达式,它接收3个参数：[code]newValue[/code](新值), [code]oldValue[/code](旧值), [code]scope[/code](作用域的引用) [b]objectEquality：[/b]是否深度监听，如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化. 如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值, 那么你应该使用它 [b]举个栗子：[/b]

$scope.name = 'hello';

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

    console.log(newValue);

    console.log(oldValue);

});

$timeout(function(){

    $scope.name = "world";

},1000);

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

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);
      }])

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

全部评论(0)

上一篇：AngularJs中route的使用方法和配置
下一篇：AngularJS extend用法详解及实例代码

资讯排行榜
更多>>