angularjs 中$apply,$digest,$watch详解


Posted in Javascript onOctober 13, 2016

如果你对angular的$apply,$digest,$watch似懂非懂,那我相信下面几句话能让你深刻理解!

此文针对已经了解过$apply,$digest,$watch的同学。也就是说你已经在很多的博客论坛搜索过$apply,$digest,$watch,虽然有点蒙,但似懂非懂的感觉。

如果你从未进行过了解,那本文对你将没有一点帮助!

<!DOCTYPE html>
<html lang="zh-CN" ng-app="app">
<head>
  <meta charset="utf-8">
  <title>angular时钟辅助理解$apply,$digest,$watch</title>
  <link rel="stylesheet" href="../bootstrap.min.css">
</head>
<body ng-controller="myController">

  <div ng-bind="clock.now"></div>


  <script src="../angular.min.js"></script>
  <script>
    angular.module(‘app‘, [])
    .controller(‘myController‘, function($scope, $timeout, $interval) {

      // 第一种
      // $scope.clock = {};
      // var clockFunction = function() {
      //   $scope.clock.now = new Date();
      //   $timeout(function() { // 使用$timeout 来代替setTimeout(),因为前者已经调用了$apply()
      //     clockFunction();
      //   }, 1000)
      //   // setTimeout(function() {
      //   //   $scope.$apply(clockFunction);
      //   // }, 1000)
      // }
      // clockFunction();

      // 第二种
      $scope.clock = {
         now: new Date()
      };   
      var updateClock = function() {
        $scope.clock.now = new Date();
      };   
      setInterval(function() { // 如果不使用$interval 则需要手动调用$apply(),以使已经改变的$scope及时的更新到view
        $scope.$apply(updateClock);

        // 这里可以看出 $scope已经改变但并未及时更新到view
        // updateClock();
        // console.log($scope.clock.now);
      }, 1000);   
      updateClock();
    })
  </script>
</body>
</html>

准备开始!

$apply (通知)
$digest(循环)
$watch(监听)

这里可能与英语的翻译有所差别,但是这不是重点,重点是让你能够理解

angular在监听数据变化并执行双向绑定时一定会做的事情:

通知($apply)angular,告诉他有一个函数test($apply(test)),需要他帮忙做下脏检查($digest脏检查),在做脏检查的同时监听数据变化($watch)并反映到view中

当不在angular上下文中的时候,则需要你手动$apply。如果不做$apply虽然angular能够监听数据变化,但他并不会将数据及时更新到view,因为他并不知道你的数据在什么时候是最新的

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
js类后台管理菜单类-MenuSwitch
Sep 12 Javascript
jQuery使用数组编写图片无缝向左滚动
Dec 11 Javascript
两种方法实现文本框输入内容提示消失
Mar 17 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
Jun 05 Javascript
JS模式之单例模式基本用法
Jun 30 Javascript
在JavaScript中访问字符串的子串
Jul 07 Javascript
浏览器兼容的JS写法总结
Apr 27 Javascript
BootStrap中
Dec 10 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
Feb 08 Javascript
angular实现input输入监听的示例
Aug 31 Javascript
vue 实现购物车总价计算
Nov 06 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
Apr 07 Javascript
jQuery鼠标事件总结
Oct 13 #Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
Oct 13 #Javascript
jQuery中delegate()方法的用法详解
Oct 13 #Javascript
炫酷的js手风琴效果
Oct 13 #Javascript
轻松搞定js表单验证
Oct 13 #Javascript
Seajs是什么及sea.js 由来,特点以及优势
Oct 13 #Javascript
使用jquery给指定的table动态添加一行、删除一行
Oct 13 #Javascript
You might like
用PHP伪造referer突破网盘禁止外连的代码
2008/06/15 PHP
PHP 变量的定义方法
2010/01/26 PHP
PHP--用万网的接口实现域名查询功能
2012/12/13 PHP
PHP把MSSQL数据导入到MYSQL的方法
2014/12/27 PHP
PHP微信开发之微信录音临时转永久存储
2018/01/26 PHP
实现php删除链表中重复的结点
2018/09/27 PHP
jQuery超精致图片轮播幻灯片特效代码分享
2015/09/10 Javascript
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
2016/10/01 Javascript
zTree实现节点修改的实时刷新功能
2017/03/20 Javascript
深入浅析Nodejs的Http模块
2017/06/20 NodeJs
详解微信小程序中组件通讯
2018/10/30 Javascript
详解vue-cli3多环境打包配置
2019/03/28 Javascript
vue组件化中slot的基本使用方法
2019/05/01 Javascript
vue实现百度语音合成的实例讲解
2019/10/14 Javascript
微信小程序订阅消息(java后端实现)开发
2020/06/01 Javascript
VUE实现吸底按钮
2021/03/04 Vue.js
python字符串替换示例
2014/04/24 Python
python写一个md5解密器示例
2018/02/23 Python
python+opencv+caffe+摄像头做目标检测的实例代码
2018/08/03 Python
Python实现的json文件读取及中文乱码显示问题解决方法
2018/08/06 Python
python_opencv用线段画封闭矩形的实例
2018/12/05 Python
Python (Win)readline和tab补全的安装方法
2019/08/27 Python
Django 实现外键去除自动添加的后缀‘_id’
2019/11/15 Python
python 提高开发效率的5个小技巧
2020/10/19 Python
10分钟理解CSS3 FlexBox弹性布局
2018/12/20 HTML / CSS
介绍一下Linux中的链接
2016/05/28 面试题
暑期实践思想汇报
2014/01/06 职场文书
高中语文教学反思
2014/01/16 职场文书
护士试用期自我鉴定
2014/02/08 职场文书
公司授权委托书
2014/10/17 职场文书
新生儿未入户证明
2015/06/23 职场文书
听证会主持词
2015/07/03 职场文书
九年级历史教学反思
2016/02/19 职场文书
Elasticsearch 数据类型及管理
2022/04/19 Python
Apache Hudi 加速传统的批处理模式
2022/04/24 Servers