通俗理解angularjs中的$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>
如果你对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的更多相关文章
- 转: 理解AngularJS中的依赖注入
理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS依赖注入系统是如何运行的. Prov ...
- 理解AngularJS中的依赖注入
点击查看AngularJS系列目录 理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS ...
- angularJS中的$apply(),$digest(),$watch()
$apply()和$digest()在AngularJS中是两个核心概念,但是有时候它们又让人困惑.而为了了解AngularJS的工作方式,首先需要了解$apply()和$digest()是如何工作的 ...
- 理解angularJS中作用域$scope
angularJS中作用域是什么 作用域(scope)是构成angularJS应用的核心基础,在整个框架中都被广泛使用,因此了解它如何工作是非常重要的 应用的作用域是和应用的数据模型相关联的,同时作用 ...
- 怎么理解angularjs中的服务?
AngularJS中的服务其实就是提供一种方式抽取共用类库 比如说一些工具类方法,我们传统的做法就是自己写个 utility 类,把相关的工具方法填充到utility里面去,最后把utility类放到 ...
- 通俗理解ABP中的模块Module
网上有不少文章说ABP的模块,有的直接翻译自官网介绍,有的分析Modlue的源代码,有的写一通代码,没什么注释,很少有能通俗说清的.那么,有两个问题:1.ABP中的模块到底是什么?2.搞这个东西是干嘛 ...
- AngularJS中的$apply
$apply()方法可以在angular框架之外执行angular JS的表达式,例如:DOM事件.setTimeout.XHR或其他第三方的库. 当仅仅使用Angular所提供的对象时,你不该过多的 ...
- JQuery选择器大全 前端面试送命题:面试题篇 对IOC和DI的通俗理解 c#中关于协变性和逆变性(又叫抗变)帮助理解
JQuery选择器大全 jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素 ...
- 理解angularJs中的$on,$broadcast,$emit
$emit作用是将一个事件从子作用域广播至父作用域,直至根作用域.(包括自己) $emit有两个参数name和args,name就是需要广播的名字,args是一个或者多个参数. $broadcast的 ...
随机推荐
- java J2EE学习入门
首先学习JAVA基础编程,大学教材就是最简单的了!象写写Helloworld啊 输出水仙花数啊 玩些简单的,慢慢在研究研究流啊,都可以了.然后学习简单的JSP,这个时候多上网上DOWN一些原码.多看看 ...
- logisticregression
from numpy import * import random import time st = time.time() def loaddata(filename): fr = open(''. ...
- Microsoft OLE DB Provider for SQL Server 错误 '80040e21'
我的是因为数据库满了,正在向服务商申请增加数据库容量 原文地址:Microsoft OLE DB Provider for SQL Server 错误 '800作者:欧阳IT记事本 昨天打开网站还正常 ...
- 用法总结:NSArray,NSSet,NSDictionary-备用
Foundation framework中用于收集cocoa对象(NSObject对象)的三种集合分别是: NSArray 用于对象有序集合(数组)NSSet 用于对象无序集合 (集合)NS ...
- 深入理解CSS选择器优先级的计算
选择器的优先级关系到元素应用哪个样式.在CSS2.1的规范(http://www.w3.org/TR/2009/CR-CSS2-20090908/cascade.html#specificity)中是 ...
- 一句话输出网站404页面,REFER及相关排序
cat www.log|awk '$9~/404/ {print $7"," $11}'|sort|uniq -c|sort -nr > ./www404.csv
- 给你讲个笑话,我是创业公司CEO
文/办公室奇葩说(Office 78)一个在办公室较为正经的八卦号. 前几天你看见朋友圈刷屏的文章<给你讲个笑话:我是做互联网的>. 你心想,写文章的那人是傻逼吗?觉得做互联网就是个笑 ...
- 抛出异常的区别 throw 和throw ex
在面试的过程中提到了异常捕获的的几种用法,之前一直使用但是没有仔细留意,调试程序的过程中发现还是有区别的,主要区别在堆栈信息的起始点不同,下边我们通过实例来看这集中不同的抛出异常的方法. 一般我们推荐 ...
- Android取得电池的电量
首先需要用到的是一个类继承BrocastReceiver 2 代码如下: public class Battery_Info extends BroadcastReceiver { @Override ...
- Codeforces Round #277.5 (Div. 2) --E. Hiking (01分数规划)
http://codeforces.com/contest/489/problem/E E. Hiking time limit per test 1 second memory limit per ...