AngularJS中指令函数的执行顺序

jac*_*cob 15 javascript angularjs angularjs-directive

指令函数的执行顺序是什么?该文件似乎并没有解决这个问题.

防爆

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

回答

从以下答案:http://plnkr.co/edit/79iyKSbfxgkzk2Pivuak(plunker显示嵌套和兄弟指令)

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

Nik*_*ita 9

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

这是一个演示(打开浏览器JS控制台)

鉴于此DOM使用指令foo:

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

  <div id="2" foo>two</div>
Run Code Online (Sandbox Code Playgroud)

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

第一遍foo.compile()

1)编译:1

2)编译:1_1

3)编译:2

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

控制器:1

控制器:1_1

链接:1_1

链接:1

控制器:2

链接:2


tam*_*are 4

预链接函数:在子元素链接之前执行。进行 DOM 转换并不安全,因为编译器链接函数将无法找到正确的链接元素。

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

以上摘录自有关指令的官方文档。

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

  • @jacob,不,编译在控制器之前(但我假设你知道这一点,并且你可能只是输入了错误的评论)。我将补充一点,在编译功能中您可以更改模板。然而,在那里所做的任何更改都会影响所有 DOM 克隆(例如,对于像 ng-repeat 这样的指令,在编译函数中对“tElement”进行更改将影响每个克隆实例)。总而言之:模板 DOM (`tElement`) 可以在编译时更改,实例 DOM (`iElement`) 在链接后更改。 (2认同)