1、背景介绍
Directive(指令)是AngularJ非常强大而有有用的功能之一。它就相当于为我们写了公共的自定义DOM元素或CLASS属性或ATTR属性,并且它不只是单单如此,你还可以在它的基础上来操作scope、绑定事件、更改样式等。通过这个Directive,我们可以封装很多公共指令,比如分页指令、自动补全指令等等。然后在HTML页面里只需要简单的写一行代码就可以实现很多强大的功能。一般情况下,需要用Directive有下面的情景:
(1). 使你的Html更具语义化,不需要深入研究代码和逻辑即可知道页面的大致逻辑。
(2). 抽象一个自定义组件,在其他地方进行重用。
2.知识剖析
directive的执行原理:
在AngularJS应用启动前,指令都以html文本的形式保存在文本编辑器中。当该应用启动后,会经过两个阶段,即编译阶段和链接阶段。之后,作用域(scope)会同html进行绑定,应用会对html中dom的操作进行实时响应。第一阶段是compile,第二阶段是link。
编译阶段: AngularJS会遍历整个html文档并根据JS中的指令定义来处理页面上声明的指令。换句话说, 在遍历dom时,所有的指令将被收集,但对dom树还没有进行数据绑定,此时对dom操作对性能影响很小。在编译阶段,同种 directive 在不同的 dom 节点出现一次,编译也会随之执行一次。然而,在这个阶段 scope 是无法访问到的。一个指令一旦编译完成,马上就可以通过编译函数对其进行访问。这个编译函数会返回一个模板函数,包含有完整的解析树。最后,模板函数被传递给编译后的dom树中每个指令定义的链接函数(link)。
链接阶段: Angular 会把所有 directive 的事件监听器注册到dom中并建立对 scope(作用域)的监听,并且把一个 scope 加到 directive 中。由于链接阶段是在编译阶段之后进行的,所以这时的scope是可以访问的。
3.常见问题
compile 和 link 的用法及区别
4.解决方案
compile用法:
compile函数负责对模板dom进行转换,它返回一个对象或者函数。compile本身相较于link函数不会那么频繁地使用。通常情况下,如果设置了compile函数,那就意味着可以在指令和实时数据被放到dom中之前对dom进行操作,在这个函数中进行例如添加或删除节点等dom操作都是安全的。
app.directive('myDirective', function() {
return {
compile: function(element, attrs, transclude){
var curEle = angular.element('id');
return function(scope, element, attrs) {
//链接函数
};
}
}
});
link函数用法:
ink函数负责将作用域和dom进行链接,并对元素的注册事件进行监听。而在这个操作执行之前,可以手动操作dom。如果有了编译函数,它会返回一个链接函数,不需要另外定义。一般来说,都可按照以下代码来定义link函数(该函数的参数列表是固定的)。
app.directive('myDirective', function() {
return {
link: function(scope, element, attrs, controller) {
//controller是require中指定的控制器,名字不能写错,不然对应不起来...
}
}
});
controller用法:
controller这里的属性值可以是一个字符串(控制器名称)或者函数(控制器内容)。如果属性值为字符串时,会以字符串为控制器的名字,查找在应用中已经注册过的控制器的构造函数。
app.directive('myDirective', function() {
return {
controller: function($scope, $element, $attrs, $transclude) {
//controller逻辑内容
}
or
controller: 'MyController'
}
});
一般在控制器内部操作dom与AngularJS的风格不符,所以需要通过链接函数来实现这个功能。
自定义指令的控制器和link函数是可以进行互换的。控制器主要用来提供可在指令间复用的行为,但是链接函数只能在当前内部指令中定义行为,且无法在指令间复用。
作用:
compile:负责对模板dom进行转换;
link: 负责将作用域和dom进行链接,并对元素的注册事件进行监听,只能在当前内部指令中定义行为,且无法在指令间复用;
controller:用来提供可在指令间复用的行为。
compile与link区别在于它们要做的事情不同,而link与controller在于这两个函数上的定位。
compile和link的区别:
◆ compile函数的作用是对指令的模板进行转换;
◆ link的作用是在模板和视图之间建立关联,包括在元素上注册监听;
◆ scope在链接阶段才会被绑定到元素上,因此compile阶段操作scope会报错;
◆ 对于同一个指令的多个实例,compile只执行一次;而link对于每个实例都会执行一次;
◆ 一般情况下我们只要编写link函数就够了;
◆ 如果编写的自定义compile函数,自定义的link函数无效,因为compile函数应该返回一个link函数供后续处理;
5.代码实战
6.拓展思考
compile 和 link的执行顺序是怎样的?
答:所有的指令都是先compile,然后preLink,然后postLink;
节点指令的preLink是在所有子节点指令preLink,postLink之前,所以一般这里可以通过scope给子节点传递一定的信息;
节点指令的postLink是在所有子节点指令preLink,postLink完毕之后,也就意味着,当父节点指令执行postLink时,子节点postLink已经都完成了,此时子dom树已经稳定,所以我们大部分dom操作,访问子节点都在这个阶段;
指令在link的过程,其实是一个深度优先遍历的过程,postLink的执行其实是一个回溯的过程;
节点上的可能有若干指令,在搜集的时候就会按一定顺序排列(通过byPriority排序),执行的时候,preLinks是正序执行,而postLinks则是倒序执行。
7.参考文献
参考一:Angular自定义指令之compile, link, controller属性详解及实例演示
参考二:angular.js指令中的controller,compile,link函数有什么不同?
参考三:angular 指令详解(一)compile与link
参考四::angular指令中的preLink函数和postLink函数
8.更多讨论
1、问:指令有什么用
可以通过指令来操作scope、绑定事件、更改样式。通过这个Directive,我们可以封装很多公共指令,比如分页指令、自动补全指令等等。然后在项目中可以进行复用,提高写代码效率。
2、问:什么时候要用指令
答:
1. 想要使Html更具语义化,不需要深入研究代码和逻辑即可知道页面的大致逻辑。
2. 想要抽象一个自定义组件,在其他地方进行重用。
3、问:restric怎么用?