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 显示当前系统时间代码
Dec 28 Javascript
JS中动态添加事件(绑定事件)的代码
Jan 09 Javascript
禁用页面部分JavaScript方法的具体实现
Jul 31 Javascript
基于Javascript实现弹出页面效果
Jan 01 Javascript
TypeScript入门-接口
Mar 30 Javascript
angular directive的简单使用总结
May 24 Javascript
详解Vue 非父子组件通信方法(非Vuex)
May 24 Javascript
初探JavaScript 面向对象(推荐)
Sep 03 Javascript
详解如何实现一个简单的Node.js脚手架
Dec 04 Javascript
vue地区选择组件教程详解
May 04 Javascript
基于AngularJs select绑定数字类型的问题
Oct 08 Javascript
前端vue+express实现文件的上传下载示例
Feb 18 Vue.js
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
收音机鉴频器对声音的影响和频偏分析
2021/03/02 无线电
Joomla简单判断用户是否登录的方法
2016/05/04 PHP
js 学习笔记(三)
2009/12/29 Javascript
jQuery DOM操作小结与实例
2010/01/07 Javascript
js判断IE浏览器版本过低示例代码
2013/11/22 Javascript
JavaScript保留两位小数的2个自定义函数
2014/05/05 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
JQuery.get提交页面不跳转的解决方法
2015/01/13 Javascript
nodejs中使用多线程编程的方法实例
2015/03/24 NodeJs
jquery实现加载进度条提示效果
2015/11/23 Javascript
JavaScript中将数组进行合并的基本方法讲解
2016/03/07 Javascript
Javascript动画效果(3)
2016/10/11 Javascript
值得学习的bootstrap fileinput文件上传工具
2016/11/08 Javascript
基于vue的短信验证码倒计时demo
2017/09/13 Javascript
Angular2之二级路由详解
2018/08/31 Javascript
js form表单input框限制20个字符,10个汉字代码实例
2019/04/12 Javascript
Vue实现base64编码图片间的切换功能
2019/12/04 Javascript
jquery实现烟花效果(面向对象)
2020/03/10 jQuery
js实现简单点赞操作
2020/03/17 Javascript
Element Notification通知的实现示例
2020/07/27 Javascript
Python 中的with关键字使用详解
2016/09/11 Python
使用pytorch进行图像的顺序读取方法
2018/07/27 Python
Django Rest framework三种分页方式详解
2019/07/26 Python
使用Python爬虫库requests发送表单数据和JSON数据
2020/01/25 Python
Python HTMLTestRunner库安装过程解析
2020/05/25 Python
浅析Python 条件控制语句
2020/07/15 Python
4款Python 类型检查工具,你选择哪个呢?
2020/10/30 Python
Html5 Canvas动画基础碰撞检测的实现
2018/12/06 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
2020/09/15 HTML / CSS
如何用PHP实现邮件发送
2012/12/26 面试题
警察思想汇报
2014/01/04 职场文书
学党史心得体会
2014/09/05 职场文书
个人作风建设心得体会
2014/10/22 职场文书
2016年第32个教师节致辞
2015/11/26 职场文书
Java中CyclicBarrier和CountDownLatch的用法与区别
2021/08/23 Java/Android
Python字符串格式化方式
2022/04/07 Python