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 脚本将当地时间转换成其它时区
Mar 19 Javascript
JavaScript和ActionScript的交互实现代码
Aug 01 Javascript
在JavaScript中使用timer示例
May 08 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
Oct 29 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
Aug 24 Javascript
ClearTimeout消除闪动实例代码
Feb 29 Javascript
基于JavaScript实现树形下拉框
Aug 10 Javascript
Angular1.x复杂指令实例详解
Mar 01 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
Mar 01 Javascript
ztree简介_动力节点Java学院整理
Jul 19 Javascript
react router 4.0以上的路由应用详解
Sep 21 Javascript
AngularJS中的路由使用及实现代码
Oct 09 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 远程关机实现代码
2009/11/10 PHP
PHP中获取文件扩展名的N种方法小结
2012/02/27 PHP
基于simple_html_dom的使用小结
2013/07/01 PHP
php网站地图生成类示例
2014/01/13 PHP
两种设置php载入页面时编码的方法
2014/07/29 PHP
PHP date()函数警告: It is not safe to rely on the system解决方法
2014/08/20 PHP
php集成套件服务器xampp安装使用教程(适合第一次玩PHP的新手)
2015/06/03 PHP
浅析PHP7新功能及语法变化总结
2016/06/17 PHP
PHP实现的DES加密解密类定义与用法示例
2020/11/02 PHP
php面试中关于面向对象的相关问题
2019/02/13 PHP
同一个表单 根据要求递交到不同页面的实现方法小结
2009/08/05 Javascript
jQuery根据纬度经度查看地图处理程序
2013/05/08 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
2015/06/19 Javascript
Backbone.js框架中简单的View视图编写学习笔记
2016/02/14 Javascript
jQuery 常用代码集锦(必看篇)
2016/05/16 Javascript
js Canvas实现圆形时钟教程
2016/09/19 Javascript
webpack+vue.js快速入门教程
2016/10/12 Javascript
bootstrap中模态框、模态框的属性实例详解
2017/02/17 Javascript
react-redux中connect()方法详细解析
2017/05/27 Javascript
Vue axios 将传递的json数据转为form data的例子
2019/10/29 Javascript
用vue 实现手机触屏滑动功能
2020/05/28 Javascript
Python合并字典键值并去除重复元素的实例
2016/12/18 Python
python通过pip更新所有已安装的包实现方法
2017/05/19 Python
Python中最大最小赋值小技巧(分享)
2017/12/23 Python
python批量实现Word文件转换为PDF文件
2018/03/15 Python
使用Python读取二进制文件的实例讲解
2018/07/09 Python
Python操作MongoDb数据库流程详解
2020/03/05 Python
Node.js 和 Python之间该选择哪个?
2020/08/05 Python
英国领先的办公用品供应商:Viking
2016/08/01 全球购物
STAY JAPAN台湾:预订日本民宿
2018/07/22 全球购物
英国著名书店:Foyles
2018/12/01 全球购物
AMAVII眼镜官网:时尚和设计师太阳镜
2019/05/05 全球购物
实验教师岗位职责
2014/02/13 职场文书
汽车技术服务与贸易专业求职信
2014/07/20 职场文书
pycharm2021激活码使用教程(永久激活亲测可用)
2021/03/30 Python
oracle通过存储过程上传list保存功能
2021/05/12 Oracle