$watch

最新推荐文章于 2024-03-04 16:08:31 发布

xupeng1986

最新推荐文章于 2024-03-04 16:08:31 发布

阅读量509

点赞数

分类专栏： AngularJS学习笔记文章标签： watch angularjs listener

本文链接：https://blog.csdn.net/xupeng1986/article/details/41244841

版权

AngularJS学习笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

$watch

在digest执行的时，如果watch观察的value和上次的不一样的时候就会被触发。
Angularjs内部的watch实现了页面随model的及时更新。
$watch(watchFn,watchaction,deepwatch)

watchFn: angular表达式或者函数的字符串

watchaction（new value， old value， scope）：watchFn发生变化会被调用

HTML文件：
<body>
<div ng-app="">
   <div ng-controller="firstController">
   {{name}}
   </div>
</div>
<script type="text/javascript" src="app/index.js"></script>
<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>
</body>

JS文件：

var firstController;

firstController = function ($scope) {

$scope.name= "Tom";

$scope.count= 0;

$scope.$watch("date",function(newValue,oldValue){
++ $scope.count;
if($scope.count>30){
$scope.name="be changed 30 times"
}
})
}

deepwatch：可选的布尔值命令检查被监控的每个对象的属性是否发生变化

这个例子watch的是一个person对象，只有 $scope.$watch("date",function(){ },true)里面加了true是，才会监控里面每一个元素的改变。如果没有添加这个true，只有当这个对象指向另一个新的对象的时候才会发生改变。

所以，$scope.$watch("date",function(){},true)比较适合watch 数组，当数组中的任何一个元素改变是都会被监控。
HTML文件：
<body>
<div ng-app="">
   <div ng-controller="firstController">
   {{person}}
   </div>
</div>
<script type="text/javascript" src="app/index.js"></script>
<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>
</body>

JS文件：

var firstController;

firstController = function ($scope) {

$scope.person= {

name="Tom";

age=20;

}

$scope.count= 0;

$scope.$watch("date",function(){

},true)
}

$watch会返回一个函数，若想要注销这个watch可以使用函数。

官方文档的解释：

`$watch(watchExpression, listener, [objectEquality]);`

Registers a listener callback to be executed whenever the watchExpression changes.

The watchExpression is called on every call to $digest() and should return the value that will be watched. (Since $digest() reruns when it detects changes the watchExpression can execute multiple times per $digest() and should be idempotent.)
The listener is called only when the value from the current watchExpression and the previous call to watchExpression are not equal (with the exception of the initial run, see below). Inequality is determined according to reference inequality, strict comparisonvia the !== Javascript operator, unless objectEquality == true (see next point)
When objectEquality == true, inequality of the watchExpression is determined according to the angular.equals function. To save the value of the object for later comparison, the angular.copy function is used. This therefore means that watching complex objects will have adverse memory and performance implications.
The watch listener may change the model, which may trigger other listeners to fire. This is achieved by rerunning the watchers until no changes are detected. The rerun iteration limit is 10 to prevent an infinite loop deadlock.

If you want to be notified whenever $digest is called, you can register a watchExpression function with no listener. (SincewatchExpression can execute multiple times per $digest cycle when a change is detected, be prepared for multiple calls to your listener.)

After a watcher is registered with the scope, the listener fn is called asynchronously (via $evalAsync) to initialize the watcher. In rare cases, this is undesirable because the listener is called when the result of watchExpression didn't change. To detect this scenario within the listener fn, you can compare the newVal and oldVal. If these two values are identical (===) then the listener was called due to initialization.

Parameters

Param Type Details

watchExpression

Param	Type	Details
watchExpression	function()string	Expression that is evaluated on each $digest cycle. A change in the return value triggers a call to the `listener`. `string`: Evaluated as expression `function(scope)`: called with current `scope` as a parameter.
listener	function(newVal, oldVal, scope)	Callback called whenever the value of `watchExpression` changes. `newVal` contains the current value of the `watchExpression` `oldVal` contains the previous value of the `watchExpression` `scope` refers to the current scope
objectEquality (optional)	boolean	Compare for object equality using `angular.equals` instead of comparing for reference equality.

function()string

Expression that is evaluated on each $digest cycle. A change in the return value triggers a call to the listener.