angularJS的⽣命周期
1、编译阶段
模板函数的函数。我们有机会在指令的模板函数被返回前，对编译后⼀旦对指令和其中的⼦模板进⾏遍历或编译，编译后的模板会返回⼀个叫做模板函数
的DOM树进⾏修改。
没有进⾏数据绑定，意味着如果此时对DOM树进⾏操作只会有很少的性能开销
很少的性能开销。基于此点， ng-repeat和ng-
在这个时间点DOM树还没有进⾏数据绑定
transclude等内置指令会在这个时候，也就是还未与任何作⽤域数据进⾏绑定时对DOM进⾏操作。
2、compile（对象或函数）
compile选项可以返回⼀个对象或函数。
compile选项本⾝并不会被频繁使⽤，但是link函数则会被经常使⽤。本质上，当我们设置了link选项，实际上是创建了⼀个postLink()链接函数，以便compile()函数可以定义链接函数。
通常情况下，如果设置了compile函数，说明我们希望在指令和实时数据被放到DOM中之前进⾏DOM操作，在这个函数中进⾏诸如添加和删除节点等DOM操作是安全的。
注：compile和link选项是互斥的。如果同时设置了这两个选项，那么会把compile所返回的函数当作链接函数，⽽link选项本⾝则会被忽略。
不要进⾏DOM事件的注册：这个操作应该在链接函数中完成。
compile: function(tEle, tAttrs, transcludeFn) {
var tplEl = angular.element('
' +'
' +'
');
var h2 = tplEl.find('h2');
h2.attr('type', pe);
h2.attr('ng-model', Model);
h2.val("hello");
return function(scope, ele, attrs) {
// 连接函数
};
}
编译函数负责对模板DOM进⾏转换。
链接函数负责将作⽤域和DOM进⾏链接。
3、链接
⽤link函数创建可以操作DOM的指令。
链接函数是可选的。如果定义了编译函数，它会返回链接函数，因此当两个函数都定义了时，编译函数会重载链接函数。如果我们的指令很简单，并且不需要额外的设置，可以从⼯⼚函数 （回
调函数）返回⼀个函数来代替对象。如果这样做了，这个函数就是链接函数。
下⾯两种定义指令的⽅式在功能上是完全⼀样的：
.directive('myDirective', function() {
return {
pre: function(tElement, tAttrs, transclude) {
// 在⼦元素被链接之前执⾏
// 在这⾥进⾏Don转换不安全
// 之后调⽤'lihk'h函数将⽆法定位要链接的元素
},
post: function(scope, iElement, iAttrs, controller) {
// 在⼦元素被链接之后执⾏
// 如果在这⾥省略掉编译选项
//在这⾥执⾏DOM转换和链接函数⼀样安全吗
}
};
});
.directive('myDirective', function() {
return {
link: function(scope, ele, attrs) {
return {
pre: function(tElement, tAttrs, transclude) {
// 在⼦元素被链接之前执⾏
// 在这⾥进⾏Don转换不安全
// 之后调⽤'lihk'h函数将⽆法定位要链接的元素
},
post: function(scope, iElement, iAttrs, controller) {
// 在⼦元素被链接之后执⾏
// 如果在这⾥省略掉编译选项
/
/在这⾥执⾏DOM转换和链接函数⼀样安全吗
}
}
}
});
下⾯看⼀下链接函数中的参数：
scope
angular和angularjs指令⽤来在其内部注册的作⽤域。
iElement
iElement参数代表实例元素，指使⽤此指令的元素。在postLink函数中我们应该只操作此元素的⼦元素，因为⼦元素已经被链接过了。
iAttrs
controller
controller 参 数 指 向 require 选 项 定 义 的 控 制 器 。 如 果 没 有 设 置 require 选 项 ， 那 么controller参数的值为undefined。
控制器在所有的指令间共享，因此指令可以将控制器当作通信通道（公共API）。如果设置了多个require，那么这个参数会是⼀个由控制器实例组成的数组，⽽不只是⼀个单独的控制器。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。