Angular中的$watch方法详解


Posted in Javascript onSeptember 18, 2017

在$apply方法中提到过脏检查,首先apply方法会触发evel方法,当evel方法解析成功后,会去触发digest方法,digest方法会触发watch方法。

(1)$watch简介

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

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

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

(2)watch方法用法

$watch(watchFn,watchAction,deepWatch)

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

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

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

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

(3)例子

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

控制器代码如下:

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代码如下:

<!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的第三个参数

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

$scope.data = {
    name :'李四',
    count:20
  }

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

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

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

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

总结

以上所述是小编给大家介绍的Angular中的$watch方法详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
Sep 14 Javascript
js自定义事件及事件交互原理概述(一)
Feb 01 Javascript
省市区三级联动下拉框菜单javascript版
Aug 11 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
Nov 17 Javascript
AngularJS 整理一些优化的小技巧
Aug 18 Javascript
JavaScript自定义文本框光标
Mar 05 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
Mar 06 Javascript
Vue写一个简单的倒计时按钮功能
Apr 20 Javascript
每天学点Vue源码之vm.$mount挂载函数
Mar 11 Javascript
layui表格内容溢出的解决方法
Sep 06 Javascript
100行代码实现vue表单校验功能(小白自编)
Nov 19 Javascript
Vue实现input宽度随文字长度自适应操作
Jul 29 Javascript
jQuery实现的表格前端排序功能示例
Sep 18 #jQuery
node.js中使用Export和Import的方法
Sep 18 #Javascript
inner join 内联与left join 左联的实例代码
Sep 18 #Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
Sep 18 #Javascript
vue多种弹框的弹出形式的示例代码
Sep 18 #Javascript
JavaScript实现body内任意节点的自定义属性功能示例
Sep 18 #Javascript
node+express+ejs使用模版引擎做的一个示例demo
Sep 18 #Javascript
You might like
点评山进PR-D3L三波段收音机
2021/03/02 无线电
PHP变量的定义、可变变量、变量引用、销毁方法
2013/12/20 PHP
PHP资源管理框架Assetic简介
2014/06/12 PHP
PHP中让curl支持sock5的代码实例
2015/01/21 PHP
PHP处理二进制数据的实现方法
2016/06/13 PHP
E3 tree 1.6在Firefox下显示问题的修复方法
2013/01/30 Javascript
JavaScript中的字符串操作详解
2013/11/12 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
2016/05/31 Javascript
轮播图组件js代码
2016/08/08 Javascript
B/S(Web)实时通讯解决方案分享
2017/04/06 Javascript
js学习总结_选项卡封装(实例讲解)
2017/07/13 Javascript
详解利用Angular实现多团队模块化SPA开发框架
2017/11/27 Javascript
Vue三层嵌套路由的示例代码
2018/05/05 Javascript
Vue中&quot;This dependency was not found&quot;问题的解决方法
2018/06/19 Javascript
vue回到顶部监听滚动事件详解
2019/08/02 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
2019/11/18 Javascript
利用JS如何获取form表单数据
2019/12/19 Javascript
[00:52]黑暗之门更新 新英雄孽主驾临DOTA2
2016/08/24 DOTA
使用Python生成url短链接的方法
2015/05/04 Python
使用python写一个自动浏览文章的脚本实例
2019/12/05 Python
python实现3D地图可视化
2020/03/25 Python
使用豆瓣源来安装python中的第三方库方法
2021/01/26 Python
类和结构的区别
2012/08/15 面试题
智乐游戏测试笔试题
2014/05/21 面试题
大学生活学习的自我评价
2013/12/03 职场文书
母亲节演讲稿范文
2014/01/02 职场文书
汽车广告策划方案
2014/05/31 职场文书
图书馆标语
2014/06/19 职场文书
会计学专业求职信
2014/07/17 职场文书
后进基层党组织整改方案
2014/10/25 职场文书
小兵张嘎观后感
2015/06/03 职场文书
我的长征观后感
2015/06/09 职场文书
婚前协议书怎么写,才具有法律效力呢 ?
2019/06/28 职场文书
python实现简单的聊天小程序
2021/07/07 Python
基于Pygame实现简单的贪吃蛇游戏
2021/12/06 Python
我的收音机情缘
2022/04/05 无线电