<!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>

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

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

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

准备开始！

$apply （通知）
$digest（循环）
$watch（监听）

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

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

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

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

通俗理解angularjs中的$apply，$digest，$watch的更多相关文章

  1. 转: 理解AngularJS中的依赖注入

    理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS依赖注入系统是如何运行的. Prov ...

  2. 理解AngularJS中的依赖注入

    点击查看AngularJS系列目录 理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS ...

  3. angularJS中的$apply(),$digest(),$watch()

    $apply()和$digest()在AngularJS中是两个核心概念,但是有时候它们又让人困惑.而为了了解AngularJS的工作方式,首先需要了解$apply()和$digest()是如何工作的 ...

  4. 理解angularJS中作用域$scope

    angularJS中作用域是什么 作用域(scope)是构成angularJS应用的核心基础,在整个框架中都被广泛使用,因此了解它如何工作是非常重要的 应用的作用域是和应用的数据模型相关联的,同时作用 ...

  5. 怎么理解angularjs中的服务？

    AngularJS中的服务其实就是提供一种方式抽取共用类库 比如说一些工具类方法,我们传统的做法就是自己写个 utility 类,把相关的工具方法填充到utility里面去,最后把utility类放到 ...

  6. 通俗理解ABP中的模块Module

    网上有不少文章说ABP的模块,有的直接翻译自官网介绍,有的分析Modlue的源代码,有的写一通代码,没什么注释,很少有能通俗说清的.那么,有两个问题:1.ABP中的模块到底是什么?2.搞这个东西是干嘛 ...

  7. AngularJS中的$apply

    $apply()方法可以在angular框架之外执行angular JS的表达式,例如:DOM事件.setTimeout.XHR或其他第三方的库. 当仅仅使用Angular所提供的对象时,你不该过多的 ...

  8. JQuery选择器大全 前端面试送命题：面试题篇 对IOC和DI的通俗理解 c#中关于协变性和逆变性（又叫抗变）帮助理解

    JQuery选择器大全   jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement")    选择id值等于myElement的元素 ...

  9. 理解angularJs中的$on,$broadcast,$emit

    $emit作用是将一个事件从子作用域广播至父作用域,直至根作用域.(包括自己) $emit有两个参数name和args,name就是需要广播的名字,args是一个或者多个参数. $broadcast的 ...

随机推荐

  1. YesFinder - 网页文件管理系统 V2.0

    2.0版增加了模态框并重写了右键菜单插件.界面改为全中文.使用方式更加灵活. 同时,文件及目录改名更方便,直接双击名称就可改名. 这是DEMO的效果图. 1.功能上的主要改进是可以双击改文件/目录名称 ...

  2. js十进制等互相转换

    //十进制转其他 var x=110; alert(x); alert(x.toString(8)); alert(x.toString(32)); alert(x.toString(16));  / ...

  3. 自定义控件学习之菜鸟笔记一（Hello World）

    一:引言 正在学习自定义控件的开发内容,做为菜鸟勤做笔记自然是必要任务了.本篇为本人学习自定义控件的学习笔记,借此和大家分享一下学习过程吧. 本人学习喜欢先看到具体的实例,然后再深入学习,故先从一个简 ...

  4. Oracle database启动过程分析

    实例跟数据库的区别 实例(instance)是内存中的一块区域和一组后台进程的集合.它的作用是维护数据库文件的.而数据库(database)则是指存放数据的数据库文件.它是一系列格式化的数据的集合.它 ...

  5. CentOS下安装postgresql

    一.说明 postgresql版本:9.4.1 安装包: postgresql94-server-9.4.1-1PGDG.rhel6.x86_64.rpm postgresql94-libs-9.4. ...

  6. ortp使用详解2

    五:数据的接收和发送 1. 发送过程: 应用发送数据时调用接口 rtp_session_send_with_ts 完成.参数为会话句柄,数据缓冲区地址,数据长度以及应用当前的时间戳.在该接口中,会先调 ...

  7. DLL模块例2：使用__declspec(dllexport)导出函数，extern "C"规范修饰名称，隐式连接调用dll中函数

    以下内容,我看了多篇文章,整合在一起,写的一个例子,关于dll工程的创建,请参考博客里另一篇文章:http://www.cnblogs.com/pingge/articles/3153571.html ...

  8. [LeetCode] 148. Sort List 解题思路

    Sort a linked list in O(n log n) time using constant space complexity. 问题:对一个单列表排序,要求时间复杂度为 O(n*logn ...

  9. JVM内存堆布局图解分析

    JAVA能够实现跨平台的一个根本原因,是定义了class文件的格式标准,凡是实现该标准的JVM都能够加载并解释该class文件,据此也可以知道,为啥Java语言的执行速度比C/C++语言执行的速度要慢 ...

  10. spark1.1.0部署standalone分布式集群

    配置三个节点的spark集群,集群模式为standalone模式,其中sp1节点作为主节点,sp2节点和sp3节点为从节点.***注意所有操作均为root用户. 创建3个CentOS虚拟机,如下: s ...