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 setCapture 区域外事件捕捉
Mar 18 Javascript
jQuery新的事件绑定机制on()示例应用
Jul 18 Javascript
JS+CSS实现电子商务网站导航模板效果代码
Sep 10 Javascript
javascript实现全角转半角的方法
Jan 23 Javascript
JavaScript中的时间处理小结
Feb 24 Javascript
JS实现动态增加和删除li标签行的实例代码
Oct 16 Javascript
理解Angular的providers给Http添加默认headers
Jul 04 Javascript
Vue2仿淘宝实现省市区三级联动
Apr 15 Javascript
webpack项目调试以及独立打包配置文件的方法
Feb 28 Javascript
JavaScript实现微信红包算法及问题解决方法
Apr 26 Javascript
Layui实现数据表格默认全部显示(不要分页)
Oct 26 Javascript
如何构建 vue-ssr 项目的方法步骤
Aug 04 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/10/11 PHP
php操作redis中的hash和zset类型数据的方法和代码例子
2014/07/05 PHP
如何让thinkphp在模型中自动完成session赋值小教程
2014/09/05 PHP
PHP的Yii框架中行为的定义与绑定方法讲解
2016/03/18 PHP
PHP PDOStatement::getColumnMeta讲解
2019/02/01 PHP
JavaScript 高级语法介绍
2009/06/15 Javascript
JS面向对象编程 for Cookie
2010/09/19 Javascript
extjs两个tbar问题探讨
2013/08/08 Javascript
正则表达式(语法篇推荐)
2016/06/24 Javascript
在windows上用nodejs搭建静态文件服务器的简单方法
2016/08/11 NodeJs
BootStrap的table表头固定tbody滚动的实例代码
2016/08/24 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
2016/09/23 Javascript
jQuery实现可兼容IE6的遮罩功能详解
2017/09/19 jQuery
Node层模拟实现multipart表单的文件上传示例
2018/01/02 Javascript
fullpage.js最后一屏滚动方式
2018/02/06 Javascript
基于layui的table插件进行复选框联动功能的实现方法
2019/09/19 Javascript
react的hooks的用法详解
2020/10/12 Javascript
python 函数传参之传值还是传引用的分析
2017/09/07 Python
Python yield与实现方法代码分析
2018/02/06 Python
利用PyCharm Profile分析异步爬虫效率详解
2019/05/08 Python
对python中的os.getpid()和os.fork()函数详解
2019/08/08 Python
python并发编程多进程 模拟抢票实现过程
2019/08/20 Python
python脚本后台执行方式
2019/12/21 Python
基于python实现监听Rabbitmq系统日志代码示例
2020/11/28 Python
CSS3 旋转立方体问题详解
2020/01/09 HTML / CSS
css3 flex实现div内容水平垂直居中的几种方法
2020/03/27 HTML / CSS
HTML5新增的标签和属性归纳总结
2018/05/02 HTML / CSS
韩国保养品、日本药妆购物网:小三美日
2018/12/30 全球购物
办公室岗位职责
2014/02/12 职场文书
幼儿教师国培感言
2014/02/19 职场文书
公司口号大全
2014/06/11 职场文书
医德医风自我评价
2014/09/19 职场文书
2014年驾驶员工作总结
2014/11/18 职场文书
2015年消费者权益日活动总结
2015/02/09 职场文书
2015年宣传思想工作总结
2015/05/22 职场文书
机械原理课程设计心得体会
2016/01/15 职场文书