$watch的详解

最新推荐文章于 2024-08-04 12:47:40 发布
最新推荐文章于 2024-08-04 12:47:40 发布
阅读量3.2k 收藏
点赞数

(1)$watch简介

在digest执行时，如果watch观察的的value与上一次执行时不一样时，就会被触发。

AngularJS内部的watch实现了页面随model的及时更新。

$watch方法在用的时候主要是手动的监听一个对象，但对象发生变化时触发某个事件。

(2)watch方法用法

?

1

$watch(watchFn,watchAction,deepWatch)

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

watchAction(newValue,oldValue,scope):watchFn发生变化会被调用

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

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

(3)例子

在前面的例子中，当name的表单改变30次，然后触发某个事件。

控制器代码如下：

?

1

2

3

4

5

6

7

8

9

10

11

var firstController = function ($scope){

  $scope.name='张三';

  $scope.count=0;

  // 监听一个model 当一个model每次改变时 都会触发第2个函数

  $scope.$watch('name',function(newValue,oldValue){

    ++$scope.count;

    if($scope.count > 30){

      $scope.name = '已经大于30次了';

    }

  });

}

html代码如下：

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

</head>

<body>

  <div ng-app="">

    <div ng-controller="firstController">

      <input type="text" value="" ng-model="name"/>

      改变次数:{{count}}-{{name}}

    </div>

  </div>

  <script type="text/javascript" src="app/index.js"></script>

<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>

</body>

</html>

运行效果如下：

前30次可以随意修改：

当修改了30次后，name固定为'已经大于30次了'：

这就是watch的作用，model每一次改变时都会触发第二个函数。

(4)watch的第三个参数

当监听的为一个对象或者数组时，例如：

?

1

2

3

4

$scope.data = {

   name :'李四',

   count:20

 }

此时data里的name和count都要监听，那么可以这么写：

?

1

2

$scope.$watch('data',function(){

},true)

如果不加第三个参数，那么只会监听data，只有当data引用改变时才会触发。

因此当需要监听一些引用对象需要把第三个参数设置成true。

qq_42809504
关注
v-model --双向数据绑定
qq_45802159的博客
01-03 3259
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
angularjs 中$apply，$digest，$watch详解
10-21
在AngularJS中，$apply，$digest和$watch是核心的脏检查机制，它们共同确保了模型和视图之间的同步。下面将详细解释这三个概念及其工作原理。 1. **$apply (通知)** `$apply`是AngularJS提供的一个方法，它的主要...
AngularJs学习笔记(4)--$scope里的$watch方法
weixin_33970449的博客
06-12 607
本文主要接住前文简单介绍一下angular中的$watch方法在前面介绍过$apply方法中提到过脏检查，首先apply方法会触发evel方法，当evel方法解析成功后，会去触发digest方法，digest方法会触发watch方法。(1)$watch简介在digest执行时，如果watch观察的的value与上一次执行时不一样时，就会被触发。AngularJS内部的watc...
Vue从入门到精通全网最强保姆级教程(持续更新中)
最新发布
2301_81007211的博客
08-04 1276
Vue是前端优秀框架， 是一套用于构建用户界面的渐进式框架。
angular $watch
weixin_30512785的博客
09-22 137
$watch是一个scope函数，用于监听模型变化，当你的模型部分发生变化时它会通知你。 $watch(watchExpression, listener, objectEquality); 每个参数的说明如下： watchExpression：监听的对象，它可以是一个angular表达式如'name',或函数如function(){return $scope.name}。...
$watch的用法
Irmhy
09-23 2124
2016-09-23 今天周五~周五~[ 转圈 ] 今天来说的是ng中内置的使用较多的函数 $watch 在这说一下 ng-options这种写法，是将names这个数组中的name值显示在下拉列表中，或者是a as a.name for a in names 这无非区别是是将整个对象当作参数处理还是具体到某个属性。 angular.module('myApp', []) .co
angularJS<六、$scope里的$watch方法>
心跳停了HeartBeat的博客
09-14 3505
angularJS 1、$watch的作用          主要用来监听model，如果model发生变化，则触发某些事情   比如我们前面说到的脏数据检查脏数据检查调用$apply方法，调用evel进行数据解析，再调用$digest方法进行检查 ，在$digest执行时候，如果$watch观察到value与上一次执行时不一样时候就会触发进行数据更新； 2、$watch的格式
AngularJs $parse、$eval和$observe、$watch详解
10-21
本文将详解这些方法的作用、用法及它们之间的区别和联系。 首先，我们来了解$parse服务。$parse是AngularJS中用于解析表达式的服务，它接收一个字符串表达式作为参数，并返回一个函数。这个返回的函数可以接受一个...
对angular 监控数据模型变化的事件方法$watch详解
10-17
在AngularJS中，`$watch`是核心的事件监听机制，用于监控数据模型（model）的变化。这个功能强大且灵活的方法可以帮助开发者在模型值改变时执行相应的操作，从而实现响应式应用。本文将深入讲解`$watch`的工作原理、...
4、$watch的用法
Learning
06-12 584
1、$watch的用法       1.1 利用$watch来观察对象属性数值的变化             1.用$watch来观察,iphone.money的改变     2.用iphone.money表示,而不是$scope.iphone.money             3.要加单引号'iphone.money'              4.代码 购物金
angularJS<$scope里的$watch方法>
zyy_0725的博客
12-04 1656
$scope里的$watch方法,angularJS
$scope.$watch
Java技术
11-07 991
参见链接： http://www.angularjs.cn/A0a6 http://yuankeqiang.lofter.com/post/8de51_1454f93
$scope.$watch监听
05-18 385
//angularJS $scope的 $watch 方法监听model改变 //$scope有个 $watch 方法，可以监听指定的model的改变，一旦model改变则触发（执行）传入其中的方法，该方法接收三个参数： //$scope.$watch('要监听的model名'，function(newValue,oldValue){},bool值指示是否监听的是对象)， //其中new...
vue_$watch用法
weixin_30614109的博客
02-05 108
vue_$watch用法 <div id="watch"> <input type="text" v-model="msg"> {{msg}} <button @click="update"></button> </div> < <s...
vue-$watch的使用
01-21 177
// $watch 是一个实例方法 vm.$watch('a', function (newValue, oldValue) { // 这个回调将在 `vm.a` 改变后调用 }); 这是$watch的一个用法。其中a不能是一个对象或者数组： 1、如果是个对象 // $watch 是...
angular $scope.$watch
weixin_34320159的博客
07-26 119
在$scope内置的所有函数中，用得最多的可能就是$watch 函数了。当你的数据模型中某一部分发生变化时，$watch函数可以向你发出通知。 你可以监控单个对象的属性，也可以监控需要经过计算的结果（函数）。 实际上只要能够被当作属性访问到，或者可以当作一个JavaScript函数被计算出来，就可以被$watch 函数监控。 它的函数签名为$watch(watchFn, watchActio...
$watch方法的应用
斟茶冰冰yozi的博客
11-16 276
直接上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>watch</title> <script src="vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"&g
Angular 事件监听$scope.$watch
weixin_43294560的博客
01-20 1105
监听服务$watch 1、不需要在控制器脚本中注入,直接使用 2、监听任何想要监听的NG变量的值,并在这个值改变的时候调用回调函数 语法:$scope.$watch('想要监听的NG变量(不需要加$scope.)或字符串',回调函数) 代码示例: <html ng-app='app' ng-controller='main' > <head> <meta ...
vue3 watch 详解
09-01
Vue3中的`watch`与Vue2中的`watch`有一些重要的变化。在Vue3中，`watch`仍然允许我们监视响应式数据的变化，并对变化做出相应的操作。不过，Vue3引入了一个新的API——`watchEffect`来取代Vue2中的`watch`。 在Vue3...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值