AngularJS中指令函数的执行顺序

时间:2013-04-17 22:56:39

标签: javascript angularjs angularjs-directive

指令功能的执行顺序是什么? documentation似乎没有解决这个问题。

实施例

  1. template / templateUrl(已评估)
  2. controllerFn
  3. compileFn
  4. linkFn
  5. 答案

    从下面的answerhttp://plnkr.co/edit/79iyKSbfxgkzk2Pivuak(plunker显示嵌套和兄弟指令)

    1. 解析模板
    2. compile()(在编译中对模板所做的更改会扩散到链接函数)
    3. controller()
    4. preLink()
    5. postLink()

2 个答案:

答案 0 :(得分:9)

相关说明,这里我对跨DOM的exec顺序的理解。

Here is a demo (open browser JS console)

鉴于此DOM使用指令foo

  <div id="1" foo>
    one
    <div id="1_1" foo>one.one</div>
  </div>

  <div id="2" foo>two</div>

... AngularJS将以深度优先顺序遍历DOM - 两次:

第一次传递foo.compile()

1)编译:1

2)编译:1_1

3)编译:2

第二遍:foo.controller()遍历; foo.link(),同时回溯

控制器:1

控制器:1_1

link:1_1

link:1

控制器:2

link:2

答案 1 :(得分:4)

  

预链接功能:在子元素链接之前执行。   自编译器链接函数以来,进行DOM转换是不安全的   将无法找到正确的链接元素。

     

链接后功能:链接子元素后执行。它   在链接后功能中进行DOM转换是安全的。

以上摘录摘自directives上的官方文件。

因此,要回答您的问题,后链接/链接功能是您可以安全地在element.children()上操作的时间/地点。