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 相关文章推荐
Mootools 1.2教程 Fx.Tween的使用
Sep 15 Javascript
怎么选择Javascript框架(Javascript Framework)
Nov 22 Javascript
jQuery 动态云标签插件
Nov 11 Javascript
JS获取图片高度宽度的方法分享
Apr 17 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 Javascript
jQuery EasyUI之DataGrid使用实例详解
Jan 04 Javascript
JavaScript面试开发常用的知识点总结
Aug 08 Javascript
jquery.form.js异步提交表单详解
Apr 25 jQuery
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
Nov 09 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
Nov 25 Javascript
vue2 中二级路由高亮问题及配置方法
Jun 10 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
Aug 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
使用 MySQL 开始 PHP 会话
2006/12/21 PHP
PHP 循环列出目录内容的函数代码
2010/05/26 PHP
2个Codeigniter文件批量上传控制器写法例子
2014/07/25 PHP
解决php的“It is not safe to rely on the system’s timezone settings”问题
2015/10/08 PHP
CodeIgniter配置之database.php用法实例分析
2016/01/20 PHP
10个值得深思的PHP面试题
2016/11/14 PHP
php模仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(中)
2017/06/11 PHP
laravel框架数据库配置及操作数据库示例
2019/10/10 PHP
JavaScript获取页面中超链接数量的方法
2015/11/09 Javascript
跟我学习javascript的undefined与null
2015/11/17 Javascript
JS判断图片是否加载完成方法汇总(最新版)
2016/05/13 Javascript
原生js和jquery分别实现横向导航菜单效果
2016/05/13 Javascript
Nodejs进阶:基于express+multer的文件上传实例
2016/11/21 NodeJs
微信小程序 radio单选框组件详解及实例代码
2017/01/10 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
2017/02/10 Javascript
Angular2下使用pdf插件的方法详解
2017/04/29 Javascript
基于jquery实现多选下拉列表
2017/08/02 jQuery
Three.js利用dat.GUI如何简化试验流程详解
2017/09/26 Javascript
NodeJs搭建本地服务器之使用手机访问的实例讲解
2018/05/12 NodeJs
AngularJS实现与后台服务器进行交互的示例讲解
2018/08/13 Javascript
微信小程序使用for循环动态渲染页面操作示例
2018/12/25 Javascript
点击按钮弹出模态框的一系列操作代码实例
2019/03/29 Javascript
原生js实现分页效果
2020/09/23 Javascript
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
Python3.5迭代器与生成器用法实例分析
2019/04/30 Python
python中dict使用方法详解
2019/07/17 Python
Python如何应用cx_Oracle获取oracle中的clob字段问题
2019/08/27 Python
PyQt5结合matplotlib绘图的实现示例
2020/09/15 Python
CSS3新属性transition-property transform box-shadow实例学习
2013/06/06 HTML / CSS
阿迪达斯丹麦官网:adidas丹麦
2016/10/01 全球购物
香港通票:Hong Kong Pass
2019/02/26 全球购物
区域销售经理职责
2013/12/22 职场文书
自我评价的写作规则
2014/01/06 职场文书
煤矿机修工岗位职责
2014/02/07 职场文书
python 逐步回归算法
2021/04/06 Python
Python机器学习之底层实现KNN
2021/06/20 Python