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 this函数调用无需再次抓获id,name或标签名
Mar 03 Javascript
JavaScript定义类和对象的方法
Nov 26 Javascript
JavaScript对数组进行随机重排的方法
Jul 22 Javascript
angularjs学习笔记之简单介绍
Sep 26 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
Dec 28 Javascript
js设置和获取自定义属性的方法
Oct 20 Javascript
JS比较两个数值的大小实例
Nov 25 Javascript
JS实现淡入淡出图片效果的方法分析
Dec 20 Javascript
Node.js中sequelize时区的配置方法
Dec 10 Javascript
通过函数作用域和块级作用域看javascript的作用域链
Aug 05 Javascript
vue+node 实现视频在线播放的实例代码
Oct 19 Javascript
Vue接口封装的完整步骤记录
May 14 Vue.js
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获取网址的顶级域名函数代码
2012/09/24 PHP
基于php设计模式中单例模式的应用分析
2013/05/15 PHP
PHP中curl_setopt函数用法实例分析
2015/04/16 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2010/02/04 Javascript
jquery键盘事件使用介绍
2011/11/01 Javascript
jquery mobile事件多次绑定示例代码
2013/09/13 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
2015/03/02 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
jquery实现弹出层效果实例
2015/05/19 Javascript
jQuery实现获取h1-h6标题元素值的方法
2017/03/06 Javascript
nodejs+express实现文件上传下载管理网站
2017/03/15 NodeJs
使用webpack3.0配置webpack-dev-server教程
2018/05/29 Javascript
详解Angular模板引用变量及其作用域
2018/11/23 Javascript
Vue.js标签页组件使用方法详解
2019/10/19 Javascript
javscript 数组扁平化的实现
2020/02/03 Javascript
[02:42]DOTA2英雄基础教程 杰奇洛
2013/12/23 DOTA
Python 的 with 语句详解
2014/06/13 Python
Win7上搭建Cocos2d-x 3.1.1开发环境
2014/07/03 Python
浅谈Python的异常处理
2016/06/19 Python
Python闭包的两个注意事项(推荐)
2017/03/20 Python
Python使用cx_Oracle调用Oracle存储过程的方法示例
2017/10/07 Python
和孩子一起学习python之变量命名规则
2018/05/27 Python
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
在python中实现将一张图片剪切成四份的方法
2018/12/05 Python
html5中localStorage本地存储的简单使用
2017/06/16 HTML / CSS
免费获得微软MCSD证书赶快行动吧!
2012/11/13 HTML / CSS
英国厨房与餐具用品为主的设计品牌:Joseph Joseph
2018/04/26 全球购物
卡骆驰德国官方网站:Crocs德国
2019/03/29 全球购物
《美丽的小兴安岭》教学反思
2014/02/26 职场文书
音乐教育感言
2014/03/05 职场文书
高三学生评语大全
2014/04/25 职场文书
家庭贫困证明
2014/09/23 职场文书
运动会表扬稿范文
2015/05/05 职场文书
财务管理制度范本
2015/08/04 职场文书
Vue实现导入Excel功能步骤详解
2021/07/03 Vue.js