标签:angular 指令
之前虽然一直都在用这套框架,但是对于指令还是知之甚少,感觉是蛮复杂的东西。看了之后也没有真正理解。
最近在做一个Angular的小项目,卡在了Angular的生命周期和自定义指令上。纠结了好几天,终于今天在地铁上灵光一闪想通了。所以赶紧把它记下来,免得后面忘记了。
我们一直都说angular的加载流程是先载入HTML片段,其中在加载<script>标签的时候加载了所有的JS库,包括我们自己写的所有的controller/service/filter以及官方的angular库.
加载完angular库之后,他会自动寻找HTML其中的ng-app指令节点,创建rootscope作用域,但是是如何加载里面的控制器的呢?
首先我们要理解 ng-controller 本身和ng-app 和 ng-if ...一样也是一个指令,只不过这个指令比较特殊,因为他有一个单独的控制器方法。
这里的情景应该就和我们平时写自定义指令里面用到的 transclude
一样,transclude的作用就是保留指令所在节点里面的子节点内容。
ng-app在编译的时候也是一样,他默认保留了ng-app所在节点的子节点,然后去寻找其中的ng-controller 指令,并且把之前读取到的控制器方法传入了对应的ng-controller上面,也就是实现ng-controller指令的编译,接下来ng-controller里面的指令编译就都交给了对应的控制器方法,他会继承rootscope生成一个子scope作用域。
接下来我们说一下控制器里面的指令是如何编译的。
首先,同样的ng-controller
指令内部也有HTML片段,里面包含了各种各样的指令有官方的,也有我们自定义的。因为控制器内部变量已经在上面绑定的时候初始化过了,然后把对应的变量赋值给里面对应的指令中,如果是官方内置的那就不用我们去操心编译和双向绑定,但是如果是我们自定义指令的话 那就需要我们自己来根据传入的变量决定如何处理这个指令实现他的compile/link方法了。
最后,同一级的指令编译永远都会在当前所在控制器方法初始化的后面。
也就是 初始化 控制器 然后看 子节点有没有指令
有的话就对该指令进行编译,没有就结束了 。
以上均不考虑双向绑定的实现
关于Angular 指令的理解
标签:angular 指令
原文地址:http://blog.csdn.net/cjd6568358/article/details/45576281