微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

AngularJs自定义指令--执行顺序 (原文:http://www.cnblogs.com/sagacite/p/4624227.html)

<div class="cnblogs_code">

 
 
      <Meta charset="UTF-8">
     
     
     
 
  

控制台:

从控制台可以看出,指令初始化甚至比控制器还早。难道说指令一旦定义,就算不在DOM中使用也会初始化?我们删掉DOM中的

代码,再看控制台,发现指令并不初始化。所以推测不对。

注意我们使用了两次d指令,但是指令的初始化只运行了一次。这个要特别小心。

另外指令内部的控制器初始化比链接函数更早执行,此后就是执行preLink和postLink。一个指令把这些执行完毕,才轮到下一个指令。

模板里的表达式居然执行了6次之多,也就是说使用一次指令就要执行3次表达式,这个在性能上需要多加考虑。

以下代码加入了编译函数(compile并不常用,不需要深入了解)

Meta charset="UTF-8">

控制台输出

可以看出编译函数比控制器更早执行,但是跟指令的初始化不同,使用两次指令就需要运行两次编译函数

上面例子在使用指令时,元素是并列的。

那么,一个元素使用两个指令,或两个指令嵌套使用,会怎么样呢?

代码

Meta charset="UTF-8">

以上代码定义d1指令和d2指令,且它们在同一个元素上使用。注意d1的优先级更高。

关于优先级的问题,可回头看文章

控制台输出

可以发现跟并列元素不同,在同一个元素上使用两个指令,其内部控制器初始化、preLink函数和postLink函数分组执行,而不是先执行完一个指令的,再执行下一个指令的。

更换指令的使用次序:

可以发现这时d2指令先初始化,但是其他函数的执行次序都不变。

修改DOM的代码如下:

再看控制台:

可以发现d2指令的初始化延迟到d1编译函数执行之后了。内部控制器的初始化次序也发生了变化。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐