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的字符串按引用复制和传递,按值来比较介绍与应用
Dec 28 Javascript
javascript中HTMLDOM操作详解
Dec 11 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
Feb 26 Javascript
浅谈Sizzle的“编译原理”
Apr 14 Javascript
AngularJS基础 ng-mouseleave 指令详解
Aug 02 Javascript
BootStrap实现鼠标悬停下拉列表功能
Feb 17 Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
Jun 20 Javascript
jquery图片放大镜效果
Jun 23 jQuery
微信小程序删除处理详解
Aug 16 Javascript
Element-UI踩坑之Pagination组件的使用
Oct 29 Javascript
浅谈bootstrap layer.open中end的使用方法
Sep 12 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
Jul 17 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,不用COM,生成excel文件
2006/10/09 PHP
PHP MVC框架路由学习笔记
2016/03/02 PHP
laravel Task Scheduling(任务调度)在windows下的使用详解
2019/10/22 PHP
IE中直接运行显示当前网页中的图片 推荐
2006/08/31 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
2013/10/24 Javascript
javascript替换已有元素replaceChild()使用介绍
2014/04/03 Javascript
JavaScript中DOM详解
2015/04/13 Javascript
详解JavaScript的Date对象(制作简易钟表)
2020/04/07 Javascript
js对象浅拷贝和深拷贝详解
2016/09/05 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
2017/05/02 Javascript
手动下载Chrome并解决puppeteer无法使用问题
2018/11/12 Javascript
javascript实现点亮灯泡特效示例
2019/10/15 Javascript
vue实现购物车选择功能
2020/01/10 Javascript
[01:04:39]OG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python执行shell获取硬件参数写入mysql的方法
2014/12/29 Python
Python批量更改文件名的实现方法
2017/10/29 Python
Python3 利用requests 库进行post携带账号密码请求数据的方法
2018/10/26 Python
Python函数的参数常见分类与用法实例详解
2019/03/30 Python
利用python在大量数据文件下删除某一行的例子
2019/08/21 Python
python golang中grpc 使用示例代码详解
2020/06/03 Python
python如何修改文件时间属性
2021/02/05 Python
关于css兼容性问题及一些常见问题汇总
2016/05/03 HTML / CSS
html5菜单折纸效果
2014/04/22 HTML / CSS
香港家用健身器材、运动器材及健康美容仪器专门店:FitBoxx
2019/12/05 全球购物
德国游戏机商店:Konsolenkost
2019/12/08 全球购物
装修致歉信
2014/01/15 职场文书
元旦促销方案
2014/03/15 职场文书
揭牌仪式主持词
2014/03/19 职场文书
高中社区服务活动报告
2015/02/05 职场文书
2015年度培训工作总结范文
2015/04/02 职场文书
2019安全宣传标语大全
2019/08/14 职场文书
小学语文的各类谚语(70首)
2019/08/15 职场文书
用 Python 元类的特性实现 ORM 框架
2021/05/19 Python
Anaconda安装pytorch和paddle的方法步骤
2022/04/03 Python
Python实现信息管理系统
2022/06/05 Python