AngularJs: $watch 监听作用域变化

 angjularjs中,有些事件不是浏览器触发的,是由模型中数据的改变触发的。通过这种功能,可以对模型(model)的改变做出响应,而无须在所有值可能变化的位置添加代码。该功能是非常有用的,因为模型中的数据通常可能会使用多种方式进行改变,用户输入、服务更新等。

为了添加处理作用域值变化的功能,可以使用angjularjs中内置的$watch功能为作用域中的变量添加$watch。$scope有个$watch方法,可以监听指定的模型的改变,一旦模型改变则触发(执行)传入其中的方法,该方法接收三个参数,如下

$scope.$watch('watchExpression' , function(newValue,oldValue){  }, bool值指示是否监听的是对象),

watchExpression 是将要监视的作用域中的表达式。该表达式将在所有$digest()中调用,并将返回被监视的值。function是一个在watchExpression 值改变成新值时调用的函数。如果watchExpression 修改为一个曾经设置过的值,那么不会调用function。

下面代码展示一个在作用域变量app.settings.asideFolded上添加$watch的示例:

 $scope.$watch('app.settings.asideFolded', function () {
    if ($scope.app.settings.asideFolded) {
       
        $scope.content_width =  $window.innerWidth - 400 - 50 - 64-134+100;
         console.log( $scope.content_width);
    }
    else{
       $scope.content_width =  $window.innerWidth - 400 - 50 - 64-134;
         console.log( $scope.content_width);
    }
  
}, true);
上述方法,可以根据 作用域变量app.settings.asideFolded值的变化来改变模型作用域 content_width 值的变化。
发布了99 篇原创文章 · 获赞 60 · 访问量 30万+

猜你喜欢

转载自blog.csdn.net/lengyuewusheng99/article/details/79377911