AngularJS1.*指令体系

知识点：

1.指令包含的概念
2.指令的执行顺序
3.指令中的scope
4.指令的长相

解释：

指令作为angularjs中的一种面向组件编程的尝试出现。符合webcomponents规范。用来打造可复用的组件。
常见的指令形式如下：

image.png

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.指令的长相

image.png