Angular学习笔记:$watch

    当angular数据模型发生变化时,我们需要如果需要根据他的变化触发其他的事件。$watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你。

    $watch(watchObj, callback, objectEquality);

参数说明:

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

$watch()执行时会先调用一次传入的回调,可以认为是初始化。

监听方式

监听model是否发生了变化,注意这里的watch提供三种api监听

  1. scope.$watch(watchExpression, listener)只监听对应的值或者reference是否变化,如果变化就触发注册的回调函数(也就是那个listener)
  2. scope.$watchCollection(watchExpression, listener)监听对应的值或者reference以及集合里是否发生变化(例如集合增加或者减少,但是不包括集合里面的值变化)
  3. scope.$watch (watchExpression, listener, true)
    监听对应的值或者reference以及集合里是否发生变化并且还包括里面的值是否发生变化,下图可以比较清晰的看出其中的区别

举个栗子:

1
2
3
4
5
6
7
8
9
html:
<input type="text" ng-model='num'>
<span>当前折扣为{{msg}}</span>
js:
$scope.$watch('num',function(newNum){
if(newNum > 100){
$scope.msg = '8折'
}
})

监听num,当num大于100时,msg为8折

文章目录
  1. 1. 参数说明:
  2. 2. 监听方式
  3. 3. 举个栗子:
|