指令生命周期

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 框架原理的更多相关文章

  1. Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

    jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...

  2. Angular企业级开发(5)-项目框架搭建

    1.AngularJS Seed项目目录结构 AngularJS官方网站提供了一个angular-phonecat项目,另外一个就是Angular-Seed项目.所以大多数团队会基于Angular-S ...

  3. TypeScript: Angular 2 的秘密武器（译）

    本文整理自Dan Wahlin在ng-conf上的talk.原视频地址: https://www.youtube.com/watch?v=e3djIqAGqZo 开场白 开场白主要分为三部分: 感谢了 ...

  4. angular实现统一的消息服务

    后台API返回的消息怎么显示更优雅,怎么处理才更简洁?看看这个效果怎么样? 自定义指令和服务实现 自定义指令和服务实现消息自动显示在页面的顶部,3秒之后消失 1. 显示消息 这种显示消息的方式是不是有 ...

  5. div实现自适应高度的textarea，实现angular双向绑定

    相信不少同学模拟过腾讯的QQ做一个聊天应用,至少我是其中一个. 过程中我遇到的一个问题就是QQ输入框,自适应高度,最高高度为3row. 如果你也像我一样打算使用textarea,那么很抱歉,你一开始就 ...

  6. Angular企业级开发-AngularJS1.x学习路径

    博客目录 有链接的表明已经完成了,其他的正在建设中. 1.AngularJS简介 2.搭建Angular开发环境 3.Angular MVC实现 4.[Angular项目目录结构] 5.[SPA介绍] ...

  7. Angular企业级开发(4)-ngResource和REST介绍

    一.RESTful介绍 RESTful维基百科 REST(表征性状态传输,Representational State Transfer)是Roy Fielding博士在2000年他的博士论文中提出来 ...

  8. Angular企业级开发(3)-Angular MVC实现

    1.MVC介绍 Model-View-Controller 在20世纪80年代为程序语言Smalltalk发明的一种软件架构.MVC模式的目的是实现一种动态的程序设计,使后续对程序的修改和扩展简化,并 ...

  9. Angular企业级开发(2)-搭建Angular开发环境

    1.集成开发环境 个人或团队开发AngularJS项目时,有很多JavaScript编辑器可以选择.使用优秀的集成开发环境(Integrated Development Environment)能节省 ...

随机推荐

  1. bzoj 1187: [HNOI2007]神奇游乐园【插头dp】

    要判边界!!要判边界!!要判边界!!if(j!=m)!!! 我真是zz横着转移要判断到底能不能向右边出边-- 然后剩下的和1814差不多,九十因为不要求经过所有格子,所以左右括号随时可以合并,但是注意 ...

  2. poj 3294 Life Forms【SA+二分】

    先加入未出现字符间隔把n个串连起来,注意如果串开的char这个间隔字符不能溢出,把这个接起来的串跑SA,二分答案k,判断的时候把连续一段he>=k的分成一组,然后看着一段是否包含了>n/2 ...

  3. 洛谷P3537 [POI2012]SZA-Cloakroom（背包）

    传送门 蠢了……还以为背包只能用来维护方案数呢……没想到背包这么神奇…… 我们用$dp[i]$表示当$c$的和为$i$时,所有的方案中使得最小的$b$最大时最小的$b$是多少 然后把所有的点按照$a$ ...

  4. YCOJ-DFS

    DFS搜索是搜索中的一种,即深度优先搜索(Depth First Search),其过程简要来说是对每一个可能的分支路径深入到不能再深入为止,而且每个节点只能访问一次. 图示: 如图,这是邻接矩阵,我 ...

  5. Codeforces Round #405 (rated, Div. 2, based on VK Cup 2017 Round 1) C

    Description In the army, it isn't easy to form a group of soldiers that will be effective on the bat ...

  6. 1-9方法的重写(override)

    什么是重写? 重写,也叫做覆盖,当父类中的方法无法满足子类需求时,子类可以将父类的方法进行重写编写来满足需求.比如孩子继承了父亲的房子,可以将房子重新装修. 方法重写的条件: 两个类必须是继承关系 必 ...

  7. synchronized(6)修饰语方法之：static方法

    当一个synchronized关键字修饰的方法同时又被static修饰,之前说过,非静态的同步方法会将对象上锁,但是静态方法不属于对象,而是属于类,它会将这个方法所在的类的Class对象上锁. 一个类 ...

  8. JAVA常用知识总结（五）——Linux

    简单介绍一下 Linux 文件系统? 在Linux操作系统中,所有被操作系统管理的资源,例如网络接口卡.磁盘驱动器.打印机.输入输出设备.普通文件或是目录都被看作是一个文件. 也就是说在LINUX系统 ...

  9. pkill 和 pgrep总结

    查看进程ID和方便kill进程 pgrep -d 指定分隔符 pgrep -d ' ' -u root 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 1 -u p ...

  10. 前端的百度地图的api的使用

    1.打开百度地图官方api网页 http://lbsyun.baidu.com/ 2.点击开发文档 3.选择对应的api 4.点击DEMO详情 5.得到源码复制到你的代码中 <!DOCTYPE ...