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 Firefox与IE 替换节点的方法
Feb 24 Javascript
一些常用的JavaScript函数(json)附详细说明
May 25 Javascript
Jquery选择器中使用变量实现动态选择例子
Jul 25 Javascript
jQuery实现html表格动态添加新行的方法
May 28 Javascript
jquery 正整数数字校验正则表达式
Jan 10 Javascript
jQuery表格的维护和删除操作
Feb 03 Javascript
vue里面父组件修改子组件样式的方法
Feb 03 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
Vue2实时监听表单变化的示例讲解
Aug 30 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
Dec 05 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
Aug 19 Javascript
express异步函数异常捕获示例详解
Nov 30 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分页时出现的Fatal error的解决方法
2011/04/18 PHP
PHP中3种生成XML文件方法的速度效率比较
2012/10/06 PHP
php实现session自定义会话处理器的方法
2015/01/27 PHP
php在数组中查找指定值的方法
2015/03/17 PHP
PHP APP微信提现接口代码
2018/09/30 PHP
浅谈PHP匿名函数和闭包
2019/03/08 PHP
PHP设计模式之PHP迭代器模式讲解
2019/03/22 PHP
实现laravel 插入操作日志到数据库的方法
2019/10/11 PHP
javascript学习笔记(五)正则表达式
2011/04/08 Javascript
动态加载dtree.js树treeview(示例代码)
2013/12/17 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
2015/07/27 Javascript
开启BootStrap学习之旅
2016/05/04 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
2016/05/27 Javascript
深入理解ECMAScript的几个关键语句
2016/06/01 Javascript
原生JS取代一些JQuery方法的简单实现
2016/09/20 Javascript
浅谈Angular HttpClient简单入门
2018/05/04 Javascript
layui 表格的属性的显示转换方法
2018/08/14 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
jQuery动态生成的元素绑定事件操作实例分析
2019/05/04 jQuery
vuex 多模块时 模块内部的mutation和action的调用方式
2020/07/24 Javascript
[51:29]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第一场 11.05
2020/11/05 DOTA
python访问sqlserver示例
2014/02/10 Python
Python通过解析网页实现看报程序的方法
2014/08/04 Python
python脚本实现数据导出excel格式的简单方法(推荐)
2016/12/30 Python
为什么str(float)在Python 3中比Python 2返回更多的数字
2018/10/16 Python
Python-copy()与deepcopy()区别详解
2019/07/12 Python
python 实现波浪滤镜特效
2020/12/02 Python
意大利巧克力店:Chocolate Shop
2019/07/24 全球购物
一些Solaris面试题
2015/12/22 面试题
应届毕业生就业自荐信
2013/10/26 职场文书
文化宣传方案
2014/03/13 职场文书
行政专员岗位职责说明书
2014/09/01 职场文书
出生医学证明书
2014/09/15 职场文书
个人求职信格式范文
2015/03/20 职场文书
导游词之太行山青龙峡
2020/01/14 职场文书
nginx日志格式分析和修改
2022/04/28 Servers