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 相关文章推荐
javascript编程起步(第七课)
Jan 10 Javascript
把html页面的部分内容保存成新的html文件的jquery代码
Nov 12 Javascript
基于jquery实现的服务器验证控件的启用和禁用代码
Apr 27 Javascript
extjs之去除s.gif的影响
Dec 25 Javascript
JS 使用for循环遍历子节点查找元素
Sep 06 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
Sep 01 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
Dec 24 Javascript
原生JS实现-星级评分系统的简单实例
Aug 21 Javascript
详解webpack分离css单独打包
Jun 21 Javascript
layer.open的自适应及居中及子页面标题的修改方法
Sep 05 Javascript
CountUp.js实现数字滚动增值效果
Oct 17 Javascript
详解ES6实现类的私有变量的几种写法
Feb 10 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加密解密类实例代码
2016/07/20 PHP
PHP实现压缩图片尺寸并转为jpg格式的方法示例
2018/05/10 PHP
PHP反射实际应用示例
2019/04/03 PHP
在phpstudy集成环境下的nginx服务器下配置url重写
2019/12/02 PHP
用dtree实现树形菜单 dtree使用说明
2011/10/17 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
2013/05/13 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
2013/07/16 Javascript
JavaScript中实现最高效的数组乱序方法
2014/10/11 Javascript
Javascript字符串浏览器兼容问题分析
2014/12/01 Javascript
jQuery中的ajax async同步和异步详解
2015/09/29 Javascript
js中获取 table节点各tr及td的内容简单实例
2016/10/14 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
2017/05/26 Javascript
vue.js简单配置axios的方法详解
2017/12/13 Javascript
vue2 全局变量的设置方法
2018/03/09 Javascript
基于vue实现可搜索下拉框定制组件
2020/03/26 Javascript
vue-router源码之history类的浅析
2019/05/21 Javascript
细述Javascript的加法运算符的具体使用
2019/10/18 Javascript
[02:05]2014DOTA2西雅图国际邀请赛 BBC第二天小组赛总结
2014/07/11 DOTA
[00:32]2018DOTA2亚洲邀请赛iG出场
2018/04/03 DOTA
Python sys.path详细介绍
2013/10/17 Python
python入门之语句(if语句、while语句、for语句)
2015/01/19 Python
python以环状形式组合排列图片并输出的方法
2015/03/17 Python
安装dbus-python的简要教程
2015/05/05 Python
在Windows服务器下用Apache和mod_wsgi配置Python应用的教程
2015/05/06 Python
python格式化输出保留2位小数的实现方法
2019/07/02 Python
python如何保证输入键入数字的方法
2019/08/23 Python
纯css3实现思维导图样式示例
2018/11/01 HTML / CSS
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
2021/01/27 HTML / CSS
一套比较完整的软件测试人员面试题
2012/05/13 面试题
绘画设计学生的个人自我评价
2013/09/20 职场文书
高级文秘工作总结的自我评价
2013/09/28 职场文书
建筑设计专业求职自我评价
2014/03/02 职场文书
党风廉政承诺书
2014/03/27 职场文书
2014年三万活动总结
2014/04/26 职场文书
初婚初育证明范本
2014/11/24 职场文书
留学文书中的个人陈述,应该注意哪些问题?
2019/08/23 职场文书