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

<div class="cnblogs_code">

 
 
           
     
     
 
  

控制台:

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

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

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

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

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

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

控制台输出:

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

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

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

看代码:

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

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

控制台输出:

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

更换指令的使用次序:

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

修改DOM的代码如下:

再看控制台:

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

相关文章

ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中...
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是...
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题,...
Angular实现下拉菜单多选写这篇文章时,引用文章地址如下:h...
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目...
Angular数据更新不及时问题探讨前言 在修复控制角标正确变...