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 相关文章推荐
学习ExtJS border布局
Oct 08 Javascript
初窥JQuery(二)事件机制(2)
Dec 06 Javascript
javascript实现rgb颜色转换成16进制格式
Jul 10 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
Jun 03 Javascript
老生常谈JavaScript 函数表达式
Sep 01 Javascript
移动端滑动插件Swipe教程
Oct 16 Javascript
JS实现鼠标移上去显示图片或微信二维码
Dec 14 Javascript
使用JavaScript实现一个小程序之99乘法表
Sep 21 Javascript
three.js中文文档学习之通过模块导入
Nov 20 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
Jul 11 Javascript
vue组件开发之tab切换组件使用详解
Aug 21 Javascript
微信小程序实现滚动Tab选项卡
Nov 16 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学习笔记之二 php入门知识
2011/01/12 PHP
Windows和Linux中php代码调试工具Xdebug的安装与配置详解
2014/05/08 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
Yii2框架控制器、路由、Url生成操作示例
2019/05/27 PHP
Add Formatted Text to a Word Document
2007/06/15 Javascript
jquery 多行滚动代码(附详细解释)
2010/06/17 Javascript
Ext 今日学习总结
2010/09/19 Javascript
javascript 事件处理、鼠标拖动效果实现方法详解
2012/05/11 Javascript
jQuery之自动完成组件的深入解析
2013/06/19 Javascript
js获取电脑分辨率的思路及操作
2013/11/22 Javascript
javascript从右边截取指定字符串的三种实现方法
2013/11/29 Javascript
用JS实现轮播图效果(二)
2016/06/26 Javascript
浅谈React 属性和状态的一些总结
2016/11/21 Javascript
vue 2.0路由之路由嵌套示例详解
2017/05/08 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
2017/12/26 Javascript
webpack4 + react 搭建多页面应用示例
2018/08/03 Javascript
小程序组件之仿微信通讯录的实现代码
2018/09/12 Javascript
微信小程序左右滚动公告栏效果代码实例
2019/09/16 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
2020/04/07 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
2020/07/21 Javascript
vue项目打包后请求地址错误/打包后跨域操作
2020/11/04 Javascript
JavaScript实现页面高亮操作提示和蒙板
2021/01/04 Javascript
[00:55]深扒TI7聊天轮盘语音出处3
2017/05/11 DOTA
Python文件循环写入行时防止覆盖的解决方法
2018/11/09 Python
python批量读取文件名并写入txt文件中
2020/09/05 Python
关于python3中setup.py小概念解析
2019/08/22 Python
python写一个随机点名软件的实例
2019/11/28 Python
使用pytorch实现可视化中间层的结果
2019/12/30 Python
以SQLite和PySqlite为例来学习Python DB API
2020/02/05 Python
NFL墨西哥官方商店:Tienda NFL
2017/11/28 全球购物
荷兰游戏商店:Allyouplay
2019/03/16 全球购物
行政经理的岗位职责
2013/11/23 职场文书
公务员综合考察材料
2014/02/01 职场文书
租赁协议书范本
2014/04/22 职场文书
爱护公共设施倡议书
2014/08/29 职场文书
在校证明模板
2015/06/17 职场文书