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 复制或插入Html的实现方法小结
May 19 Javascript
Jquery下:nth-child(an+b)的使用注意
May 28 Javascript
JavaScript对象创建及继承原理实例解剖
Feb 28 Javascript
js二维数组排序的简单示例代码
Jan 24 Javascript
容易造成JavaScript内存泄露几个方面
Sep 04 Javascript
js实现点击添加一个input节点
Dec 05 Javascript
js给selected添加options的方法
May 06 Javascript
js实现的Easy Tabs选项卡用法实例
Sep 06 Javascript
javascript replace()第二个参数为函数时的参数用法
Dec 26 Javascript
TableSort.js表格排序插件使用方法详解
Feb 10 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
Jun 01 Javascript
koa源码中promise的解读
Nov 13 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中ob_start函数的使用说明
2013/11/11 PHP
php实现字符串首字母转换成大写的方法
2015/03/17 PHP
微信公众平台开发实现2048游戏的方法
2015/04/15 PHP
深入理解JavaScript系列(12) 变量对象(Variable Object)
2012/01/16 Javascript
window.open的页面如何刷新(父页面)上层页面
2012/12/28 Javascript
获取内联和链接中的样式(js代码)
2013/04/11 Javascript
jQuery实现连续动画效果实例分析
2015/10/09 Javascript
javascript实现数字倒计时特效
2016/03/30 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
2017/03/25 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
2017/09/02 Javascript
vuex 使用文档小结篇
2018/01/11 Javascript
vue-cli配置环境变量的方法
2018/07/09 Javascript
vue 解决computed修改data数据的问题
2019/11/06 Javascript
Js和VUE实现跑马灯效果
2020/05/25 Javascript
vue2.0 解决抽取公用js的问题
2020/07/31 Javascript
vue中父子组件的参数传递和应用示例
2021/01/04 Vue.js
用Python抢过年的火车票附源码
2015/12/07 Python
python技能之数据导出excel的实例代码
2017/08/11 Python
纯python实现机器学习之kNN算法示例
2018/03/01 Python
Python使用cx_Oracle模块操作Oracle数据库详解
2018/05/07 Python
Django教程笔记之中间件middleware详解
2018/08/01 Python
python字符串循环左移
2019/03/08 Python
python set内置函数的具体使用
2019/07/02 Python
python3.7环境下安装Anaconda的教程图解
2019/09/10 Python
Python下载的11种姿势(小结)
2020/11/18 Python
css3 transform属性详解
2014/09/30 HTML / CSS
基于CSS3实现图片模糊过滤效果
2015/11/19 HTML / CSS
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
2021/01/19 HTML / CSS
俄罗斯街头服装品牌:Black Star Wear
2017/03/01 全球购物
2014年教师培训的自我评价
2014/01/03 职场文书
美术教师自我鉴定
2014/02/12 职场文书
补充协议书范本
2014/04/23 职场文书
董事长助理工作职责范本
2014/07/01 职场文书
基层党员群众路线整改措施及努力方向
2014/10/28 职场文书