Angular 1.x 框架原理
指令生命周期
compile阶段
对dom进行编译，首先（如果有的话）对template进行应用（这个过程只执行一次）。然后把当前指令（内部的指令还没被渲染）传递给iElement，接着执行compile（这个过程执行多次）。多个指令实例只会执行一次compile，所以只要我们在compile中对iElemet进行修改，虽然只执行了一次，却作用到了所有指令实例上。因为这个时候dom还没有进行作用域数据关联，所以对iElement进行大量的dom修改是很高效率的。
如果定义了compile函数，则DDO中的link会失效，所以如果要用到compile和link，只能在compile中返回link函数
例子：
<dx>
这是内层
</dx>
<dx a="3">
这是内层
</dx>
</body>
<script>
var app = angular.module('app',[]);
app.directive('dx',function(){
return {
compile:function(tElement,tAttrs,transclude){
tElement[0].innerHTML = 'qweqweqwe'
return function(scope,ele,attr){
if(attr.a == 3){
ele[0].innerHTML = 789;
}
}
}
}
});
</script>
运行结果：qweqweqwe 789
Link阶段
建立模型与视图之间的关系。 Postlink在link阶段结束时执行，，link阶段会连接scope，所以我们才可以在postlink中使用scope。Link阶段会把之前指令compile的结果应用上去，这里可以理解为，一个指令只有一个编译结果，在link阶段却被多个指令实例复制拿去用了。所以在link中对ele的修改，只会修改到自己的，而不会影响其他指令实例
Link和controller对比
两者都可获取到当前的作用域；
一般来说，controller里一般放业务逻辑代码，业务逻辑函数绑定到controller上；而link放监听事件如watcher等。其实link中也可以放逻辑代码，但尽量不要这么做，因为很容易造成污染【如继承了这个scope的子scope都可以访问到这些变量和方法，容易造成意想不到的后果】。对于父子指令之间需要沟通协作时，一般是用controller来通信【指令的require可以获取controller】或者把通信的代码抽取成一个服务，父子指令通过这个服务来通信。
ps：指令内部使用有名控制器，就会在作用域上创建一个对应的属性，可以直接在视图中访问了控制器了，如：
<body ng-app="app">
<div xx>
{{myController.data}}
</div>
</body>
<script>
var app = angular.module('app',[]);
app.directive('xx',function(){
return {
controllerAs:"myController",
controller:function(){
this.data = 123;
}
}
});
</script>
执行次序
all compile，由外向里 》 all controller由外向里 》 all prelink外向里 》全部postlink里向外
响应式原理：脏检测
当用户与浏览器进行了交互【点击、输入等】，浏览器会执行响应的回调函数。Angular拓展了浏览器的这个过程，当发生交互时（或者$setTimeout等），浏览器会通知angular框架，进入angular context执行环境，开始执行digest循环。【或者可以认为进入angular context，就等同于digest执行】
这也就是为什么在ngClick中触发digest，会报错。因为digest循环不能嵌套，执行ngClick的时候、digest没结束，又再次手动触发digest的话，就出现嵌套、则报错。
在digest循环中执行每个watch【执行表达式】，查看上一次的值跟这一次执行的值是否发生了变化、发生了变化就调用watch的回调函数，然后重新执行digest，直到执行的每个watch表达式的值都没发生变化为止。{{xx}}会创建一个xx表达式的watch，repeate会创建 1 + n * m 个watch【1：repeat数据源、n循环次数、m循环中的{{item.xx}}】。Digest循环上限重复运算10次，超过则报错。
报错的例子【不稳定的模型】：
<span>{{random()}}</span>
// random函数定义如下：
$scope.random = Math.random;
以上的random函数会创建一个watch，但是每次执行watch表达式运算出来的结果都是和上次的不一致，则又重新执行digest，循环往复超过10次，报错
等循环结束，所有model都稳定了，才批量地更新UI
这里补充一个工作原理：http://www.cnblogs.com/penghongwei/p/3444601.html
Angular 1.x 框架原理的更多相关文章
- Angular杂谈系列1-如何在Angular2中使用jQuery及其插件
jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...
- Angular企业级开发(5)-项目框架搭建
1.AngularJS Seed项目目录结构 AngularJS官方网站提供了一个angular-phonecat项目,另外一个就是Angular-Seed项目.所以大多数团队会基于Angular-S ...
- TypeScript: Angular 2 的秘密武器（译）
本文整理自Dan Wahlin在ng-conf上的talk.原视频地址: https://www.youtube.com/watch?v=e3djIqAGqZo 开场白 开场白主要分为三部分: 感谢了 ...
- angular实现统一的消息服务
后台API返回的消息怎么显示更优雅,怎么处理才更简洁?看看这个效果怎么样? 自定义指令和服务实现 自定义指令和服务实现消息自动显示在页面的顶部,3秒之后消失 1. 显示消息 这种显示消息的方式是不是有 ...
- div实现自适应高度的textarea，实现angular双向绑定
相信不少同学模拟过腾讯的QQ做一个聊天应用,至少我是其中一个. 过程中我遇到的一个问题就是QQ输入框,自适应高度,最高高度为3row. 如果你也像我一样打算使用textarea,那么很抱歉,你一开始就 ...
- Angular企业级开发-AngularJS1.x学习路径
博客目录 有链接的表明已经完成了,其他的正在建设中. 1.AngularJS简介 2.搭建Angular开发环境 3.Angular MVC实现 4.[Angular项目目录结构] 5.[SPA介绍] ...
- Angular企业级开发(4)-ngResource和REST介绍
一.RESTful介绍 RESTful维基百科 REST(表征性状态传输,Representational State Transfer)是Roy Fielding博士在2000年他的博士论文中提出来 ...
- Angular企业级开发(3)-Angular MVC实现
1.MVC介绍 Model-View-Controller 在20世纪80年代为程序语言Smalltalk发明的一种软件架构.MVC模式的目的是实现一种动态的程序设计,使后续对程序的修改和扩展简化,并 ...
- Angular企业级开发(2)-搭建Angular开发环境
1.集成开发环境 个人或团队开发AngularJS项目时,有很多JavaScript编辑器可以选择.使用优秀的集成开发环境(Integrated Development Environment)能节省 ...
随机推荐
- mysqldump 工具使用详解——参数选项
mysqldump 简介 mysqldump 是一种用于逻辑备份的客户端工具,它会产生一套能够重新构建数据库或表的SQL语句.所谓逻辑备份:是利用SQL语言从数据库中抽取数据并存于二进制文件的过程.逻 ...
- Photoshop下载
Adobe Photoshop,简称“PS”,是由Adobe Systems开发和发行的图像处理软件.Photoshop主要处理以像素所构成的数字图像.使用其众多的编修与绘图工具,可以有效地进行图片编 ...
- LeetCode.896-单调数组(Monotonic Array)
这是悦乐书的第345次更新,第369篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第210题(顺位题号是896).如果数组单调递增或单调递减,则数组是单调的.如果对于所有 ...
- c#数据类型和类型转换
C# 数据类型 在 C# 中,变量分为以下几种类型: 值类型(Value types) 引用类型(Reference types) 指针类型(Pointer types) 值类型(Value type ...
- 【转】grep 用法详解
有时会使用到,但老忘,转到博客以便学习收藏 转自http://blog.csdn.net/tenfyguo/article/details/6387786 首先要记住的是: 正则表达式与通配符不一样, ...
- bootstrap div 固定
div固定在顶部样式: .navbar-fixed-top div固定在底部样式 .navbar-fixed-bottom
- 动手实现 React-redux（三）：connect 和 mapStateToProps
我们来观察一下刚写下的这几个组件,可以轻易地发现它们有两个重大的问题: 有大量重复的逻辑:它们基本的逻辑都是,取出 context,取出里面的 store,然后用里面的状态设置自己的状态,这些代码逻辑 ...
- 取URL中各个参数的值
取参数值的方法有很多,个人记录一个方便好用的 //查询参数(参数名)function GetQueryString(name) { var reg = new RegExp("(^|& ...
- Asp.net MVC + Vue.js
@{ Layout = null; } <!DOCTYPE html><html> <head> <meta charset="UTF-8" ...
- 不能说的hidden
不能说的hidden 时光跑跑...路在脚下...晨光依在...----Vashon 1.所谓"时尚",本质上就是自己看不见自己的样子.好比我们在地球上,却感觉不到地球在动. 2. ...