$scope.$watch监听

Posted niunf

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了$scope.$watch监听相关的知识,希望对你有一定的参考价值。

//angularJS $scope的 $watch 方法监听model改变
//$scope有个 $watch 方法,可以监听指定的model的改变,一旦model改变则触发(执行)传入其中的方法,该方法接收三个参数:
//$scope.$watch(‘要监听的model名‘,function(newValue,oldValue){},bool值指示是否监听的是对象),
//其中newValue 指向所监听的model,即两者是一回事,而oldValue 则是监听model 此次改变前的拷贝。


eg:
<body ng-app="myApp">
<div ng-controller="firstController">
<input type="text" ng-model="name">
改变次数:{{count}} 新值:{{name}}
<br/><br/>
<input type="text" ng-model="data.name">
改变次数:{{data.count}} 新值:{{data.name}}
</div>
  
<script>
var app = angular.module(‘myApp‘,[]);
app.controller("firstController",function($scope){
$scope.name = "张三";
$scope.count = 0;
$scope.data = {
name:‘李四‘,
count:0
}
//监听模型name,name每次改变时 都会执行传入的参数
//因为name 不是对象,所以不必传第三个参数
$scope.$watch(‘name‘,function(newValue,oldValue){
$scope.count++;
if($scope.count>10){
$scope.name = ‘已经大于10次了‘;
}
});
//监听模型data data每次改变时 都会执行传入的函数
//设置$watch 方法的第三个参数为true,指示监听的是一个对象(该对象的每个属性变化都会执行)
$scope.$watch(‘data‘,function(newValue,oldValue){
console.log($scope.data==newValue); //永远是true;
console.log($scope.data==oldValue); // 页面初始化后是true,data改变之后永远是false;
console.log("新值"+newValue.name+ " 旧值:"+oldValue.name);
},true);



});
</script>
</body>


以上是关于$scope.$watch监听的主要内容,如果未能解决你的问题,请参考以下文章

ng -----监听变化($scope.$watch())

AngularJS $watch 监听

Angular.JS中使用$watch监听模型变化

Angular.js中使用$watch监听模型变化

Angular.js中使用$watch监听模型变化

angularjs中 $watch 和$on 2种监听的区别?