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 值的变化。