关于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方法了。
 最后,同一级的指令编译永远都会在当前所在控制器方法初始化的后面。
也就是 初始化 控制器 然后看 子节点 有没有指令 有的话就对该指令进行编译,没有就结束了  。
 以上均不考虑双向绑定的实现
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值