One day you will be the one you want to be.

又一天过去了。今天过得怎么样,梦想是不是更远了?

AngularJS的生命周期

###AngularJS的生命周期

在AngularJS应用起动前,它们以HTML文本的形式保存在文本编辑器中。应用启动后会进行编译和链接, 作用域会同HTML进行绑定, 应用可以对用户在HTML中进行的操作进行实时响应。这个过程就是AngularJS的生命周期.
AngularJS的生命周期分为两个阶段

#####编译阶段
第一个阶段是编译阶段。在编译阶段,AngularJS会遍历整个HTML文档并根据JavaScript中
的指令定义来处理页面上声明的指令。
一旦对指令和其中的子模板进行遍历或编译,编译后的模板会返回一个叫做模板函数的函
数.在这个时间点DOM树还没有进行数据绑定,意味着如果此时对DOM树进行操作只会有很少
的性能开销。基于此点, ng-repeat 和 ng-transclude 等内置指令会在这个时候,也就是还未与
任何作用域数据进行绑定时对DOM进行操作。
一个指令的表现一旦编译完成,马上就可以通过编译函数对其进行访问,编译函数的签名包
含有访问指令声明所在的元素( tElemente )及该元素其他属性( tAttrs )的方法
由于每个指令都可以有自己的模板和编译函数,每个模板返回的也都是自己
的模板函数。链条顶部的指令会将内部子指令的模板合并在一起成为一个模板函数并返回,但在
树的内部,只能通过模板函数访问其所处的分支。
最后,模板函数被传递给编译后的DOM树中每个指令定义规则中指定的链接函数,

#####链接阶段
用 link 函数创建可以操作DOM的指令
链接函数是可选的。 如果定义了编译函数, 它会返回链接函数, 因此当两个函数都定义了时,
编译函数会重载链接函数。 如果我们的指令很简单, 并且不需要额外的设置, 可以从工厂函数 (回
调函数)返回一个函数来代替对象。如果这样做了,这个函数就是链接函数。
link 函数对绑定了实时数据的DOM具有控制能力
链接函数的签名如下:

1
link: function(scope, element, attrs) {
// 在这里操作DOM
}

如果指令定义中有 require 选项,函数签名中会有第四个参数,代表控制器或者所依赖的指
令的控制器。

1
// require 'SomeController',
link: function(scope, element, attrs, SomeController) {
// 在这里操作DOM,可以访问required指定的控制器
}

如果 require 选项提供了一个指令数组,第四个参数会是一个由每个指令所对应的控制器组
成的数组。
下面看一下链接函数中的参数:
1.scope
指令用来在其内部注册监听器的作用域。
2.iElement
iElement 参数代表实例元素,指使用此指令的元素。在 postLink 函数中我们应该只操作此
元素的子元素,因为子元素已经被链接过了。
3.iAttrs
iAttrs 参数代表实例属性,是一个由定义在元素上的属性组成的标准化列表,可以在所有指
令的链接函数间共享。会以JavaScript对象的形式进行传递。
4.controller
controller 参数指向 require 选项定义的控制器。如果没有设置 require 选项,那么
controller 参数的值为 undefined 。
控制器在所有的指令间共享,因此指令可以将控制器当作通信通道(公共API) 。如果设置了
多个 require ,那么这个参数会是一个由控制器实例组成的数组,而不只是一个单独的控制器。