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 数据类型转换总结笔记
Jan 17 Javascript
JQueryEasyUI datagrid框架的进阶使用
Apr 08 Javascript
Node.js安装教程和NPM包管理器使用详解
Aug 16 Javascript
js控制网页背景音乐播放与停止的方法
Feb 06 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
Mar 03 Javascript
Node.js如何自动审核团队的代码
Jul 20 Javascript
AngularJs基本特性解析(一)
Jul 21 Javascript
yarn与npm的命令行小结
Oct 20 Javascript
jQuery中map函数的两种方式
Apr 07 jQuery
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
VueCli3.0中集成MockApi的方法示例
Jul 05 Javascript
JS监听组合按键思路及实现过程
Apr 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
在PHP3中实现SESSION的功能(一)
2006/10/09 PHP
PHP提取中文首字母
2008/04/09 PHP
基于jquery的超简单上下翻
2010/04/20 Javascript
js面向对象 多种创建对象方法小结
2012/05/21 Javascript
浅析Node在构建超媒体API中的作用
2014/07/30 Javascript
node.js中的fs.exists方法使用说明
2014/12/17 Javascript
js实现带按钮的上下滚动效果
2015/05/12 Javascript
学习javascript面向对象 javascript实现继承的方式
2016/01/04 Javascript
实例讲解javascript注册事件处理函数
2016/01/09 Javascript
搭建Bootstrap离线文档的方法
2016/12/02 Javascript
Vue常用指令V-model用法
2017/03/08 Javascript
利用Vue实现移动端图片轮播组件的方法实例
2017/08/23 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
2018/06/22 Javascript
详解Nuxt.js部署及踩过的坑
2018/08/07 Javascript
vue2中引用及使用 better-scroll的方法详解
2018/11/15 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
2018/12/29 Javascript
vue数据更新UI不刷新显示的解决办法
2020/08/06 Javascript
纯Python开发的nosql数据库CodernityDB介绍和使用实例
2014/10/23 Python
Python捕捉和模拟鼠标事件的方法
2015/06/03 Python
剖析Django中模版标签的解析与参数传递
2015/07/21 Python
在Python的Django框架的视图中使用Session的方法
2015/07/23 Python
requests和lxml实现爬虫的方法
2017/06/11 Python
Python中的__slots__示例详解
2017/07/06 Python
django 按时间范围查询数据库实例代码
2018/02/11 Python
详解python异步编程之asyncio(百万并发)
2018/07/07 Python
python pip源配置,pip配置文件存放位置的方法
2019/07/12 Python
如何用Python破解wifi密码过程详解
2019/07/12 Python
python 用所有标点符号分隔句子的示例
2019/07/15 Python
python中关于数据类型的学习笔记
2020/07/19 Python
Python的collections模块真的很好用
2021/03/01 Python
美国零售商店:Blue&Cream
2017/04/07 全球购物
创业计划书怎样才能打动风投
2014/01/01 职场文书
初中生物教学反思
2014/01/10 职场文书
承诺书怎么写 ?
2019/04/16 职场文书
导游词之西安骊山
2019/12/03 职场文书
SQL优化老出错,那是你没弄明白MySQL解释计划用法
2021/11/27 MySQL