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 相关文章推荐
一个小型js框架myJSFrame附API使用帮助
Jun 28 Javascript
基于JQuery的动态删除Table表格的行和列的代码
May 12 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
Jan 24 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
Aug 30 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
Apr 28 Javascript
Jquery注册事件实现方法
May 18 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
Dec 02 Javascript
D3.js实现拓扑图的示例代码
Jun 30 Javascript
JavaScript JSON数据处理全集(小结)
Aug 15 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
Sep 23 Javascript
JS实现电脑虚拟键盘打字测试
Jun 24 Javascript
解决vue-router 切换tab标签关闭时缓存问题
Jul 22 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
PHP连接SQLServer2005 的问题解决方法
2010/07/19 PHP
jquery使用经验小结
2015/05/20 Javascript
javascript html5 canvas实现可拖动省份的中国地图
2016/03/11 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
2016/12/15 Javascript
AngularJs上传前预览图片的实例代码
2017/01/20 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
2017/03/09 Javascript
Angular项目中$scope.$apply()方法的使用详解
2017/07/26 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
2017/12/05 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
2018/01/31 Javascript
vue写一个组件
2018/04/09 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
2018/09/21 Javascript
解决vue 单文件组件中样式加载问题
2019/04/24 Javascript
[00:57]林俊杰助阵DOTA2亚洲邀请赛
2015/01/28 DOTA
[00:12]2018DOTA2亚洲邀请赛 sylar表现SOLO技艺
2018/04/06 DOTA
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
Python中模块与包有相同名字的处理方法
2017/05/05 Python
python dataframe astype 字段类型转换方法
2018/04/11 Python
python实现桌面托盘气泡提示
2019/07/29 Python
python3使用print打印带颜色的字符串代码实例
2019/08/22 Python
全网最全python库selenium自动化使用详细教程
2021/01/12 Python
CSS3中Transition动画属性用法详解
2016/07/04 HTML / CSS
英国网上香水店:Fragrance Direct
2016/07/20 全球购物
美国知名运动产品零售商:Foot Locker
2016/07/23 全球购物
澳大利亚儿童鞋在线:The Trybe
2019/07/16 全球购物
linux面试题参考答案(10)
2016/10/26 面试题
内科护士实习自我鉴定
2013/10/17 职场文书
致1500米运动员广播稿
2014/02/07 职场文书
干部鉴定材料
2014/05/18 职场文书
社团活动总结报告
2014/06/27 职场文书
警察正风肃纪剖析材料
2014/10/16 职场文书
解除同居协议书
2015/01/29 职场文书
导游词格式
2015/02/13 职场文书
2019XX公司员工考核管理制度!
2019/08/07 职场文书
浅析MongoDB之安全认证
2021/06/26 MongoDB
浅谈Python3中datetime不同时区转换介绍与踩坑
2021/08/02 Python
iSCSI服务器CHAP双向认证配置
2022/04/01 Servers