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 URL参数的拼接方法比较
Feb 15 Javascript
简单方法判断JavaScript对象为null或者属性为空
Sep 26 Javascript
js实现简单的左右两边固定广告效果实例
Apr 10 Javascript
深入理解jquery中的事件与动画
May 24 Javascript
JavaScript变量声明var,let.const及区别浅析
Apr 23 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
Jun 19 Javascript
浅谈vue父子组件怎么传值
Jul 21 Javascript
vue-content-loader内容加载器的使用方法
Aug 05 Javascript
微信小程序合法域名配置方法
May 06 Javascript
Bootstrap实现模态框效果
Sep 30 Javascript
微信小程序利用button控制条件标签的变量问题
Mar 15 Javascript
如何在JavaScript中正确处理变量
Dec 25 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
《魔兽争霸3》重制版究竟重制了什么?玩家:这么糊弄真的好吗?
2020/05/04 魔兽争霸
桌面中心(二)数据库写入
2006/10/09 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
浅谈PHP Cookie处理函数
2016/06/10 PHP
PHP MySql增删改查的简单实例
2016/06/21 PHP
PHP的HTTP客户端Guzzle简单使用方法分析
2019/10/30 PHP
Mootools 1.2教程 排序类和方法简介
2009/09/15 Javascript
extjs每个组件要设置唯一的ID否则会出错
2014/06/15 Javascript
javascript常用函数归纳整理
2014/10/31 Javascript
DeviceOne 让你一见钟情的App快速开发平台
2016/02/17 Javascript
jQuery实现select模糊查询(反射机制)
2017/01/14 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
2017/01/19 Javascript
详解如何在vue中使用sass
2017/06/21 Javascript
JQuery实现table中tr上移下移的示例(超简单)
2018/01/08 jQuery
JS获取并处理php数组的方法实例分析
2018/09/04 Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
2019/05/09 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
2019/06/04 Javascript
vue使用video插件vue-video-player详解
2020/10/23 Javascript
Vue 修改网站图标的方法
2020/12/31 Vue.js
巧用Python装饰器 免去调用父类构造函数的麻烦
2012/05/18 Python
用Python中的字典来处理索引统计的方法
2015/05/05 Python
Python实现控制台输入密码的方法
2015/05/29 Python
使用python 爬虫抓站的一些技巧总结
2018/01/10 Python
在Pycharm中对代码进行注释和缩进的方法详解
2019/01/20 Python
Python获取命令实时输出-原样彩色输出并返回输出结果的示例
2019/07/11 Python
python Paramiko使用示例
2020/09/21 Python
html5嵌入内容_动力节点Java学院整理
2017/07/07 HTML / CSS
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
院领导写的就业推荐信
2014/03/09 职场文书
高中教师先进事迹材料
2014/08/22 职场文书
学生穿着不得体检讨书
2014/10/12 职场文书
毕业生对母校寄语
2015/02/26 职场文书
2015年房产销售工作总结范文
2015/05/22 职场文书
2016教师党员学习心得体会
2016/01/21 职场文书
windows系统搭建WEB服务器详细教程
2022/08/05 Servers