知识点:
1.指令包含的概念
2.指令的执行顺序
3.指令中的scope
4.指令的长相
解释:
指令作为angularjs中的一种面向组件编程的尝试出现。符合webcomponents规范。用来打造可复用的组件。
常见的指令形式如下:
1.指令包含的概念
restrict 限定指令绑定元素、属性
replace 表示是否进行替换
scope 表示指令自己的scope
compile 表示指令编译阶段的函数 返回link函数
link 表示指令的执行过程
element 表示指令所在元素。默认为jQLite,如果引入JQ,则为JQ对象。
attr 表示指令的属性
2.指令的执行顺序
引用引导启动之后,Angular使用内置的$compile服务来遍历DOM元素。遇到非浏览器元素的时候,开始认为是Angular指令。指令包含Angular内置指令(如ng-click)和自定义指令。扫描完所有指令之后,分别执行每个指令的compile方法。compile 方法返回一个 link 函数,被添加到稍后执行的 link 函数列表中。这被称为编译阶段。如果一个指令需要被克隆很多次(比如 ng-repeat),compile函数只在编译阶段被执行一次,复制这些模板,但是link 函数会针对每个被复制的实例被执行。所以分开处理,让我们在性能上有一定的提高。这也说明了为什么在 compile 函数中不能访问到scope对象。在编译阶段之后,就开始了链接(linking)阶段。在这个阶段,所有收集的 link 函数将被一一执行。指令创造出来的模板会在正确的scope下被解析和处理,然后返回具有事件响应的真实的DOM节点。
3.指令中的Scope
指令是独立的作用域。需要指定和父类controller作用域的关系。分为三种
默认:共享controller的scope,相当于双向数据绑定。
{}:表示隔离独有自己的作用域
scope:true 表示继承父类scope,相当于拷贝了一份。
其中{}又分为三种策略: = & @
@表示拷贝父scope中的某个Model到自己的scope中
=表示拷贝付scope中的某个model,并且实现双向数据绑定
&表示拷贝父类scope的方法到自己的scope
4.指令的长相