Порядок выполнения директивных функций в AngularJS

Каков порядок выполнения директивных функций? документация, похоже, не затрагивает этого.

Пример

  • template/templateUrl (оценивается)
  • controllerFn
  • compileFn
  • linkFn

Ответ

От answer ниже: http://plnkr.co/edit/79iyKSbfxgkzk2Pivuak (plunker показывает вложенные и родственные директивы)

  • Шаблон проанализирован
  • compile() (изменения, внесенные в шаблон внутри компиляции, распространяются вплоть до связывания функций)
  • controller()
  • preLink()
  • postLink()

Ответы

Ответ 1

Функция предварительной привязки: выполняется до того, как дочерние элементы связаны. Небезопасно выполнять преобразование DOM, поскольку функция связывания компилятора не смогут найти правильные элементы для компоновки.

Функция постсвязывания: Выполняется после того, как дочерние элементы связаны. Это безопасно выполнять преобразование DOM в функции постсвязывания.

Выше выдержка взята из официальных документов в .

Итак, чтобы ответить на ваш вопрос, функция Post-linking/Link - это когда/где вы можете безопасно работать с element.children().

Ответ 2

на соответствующей заметке, здесь мое понимание порядка exec в DOM.

Вот демонстрационная версия (открытая консоль JS для браузера)

Учитывая эту DOM с помощью директивы foo:

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

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

... AngularJS будет пересекать DOM - дважды - в глубине-первом порядке:

1-й проход foo.compile()

1) скомпилировать: 1

2) скомпилировать: 1_1

3) скомпилировать: 2

2-й проход: foo.controller() пересекает вниз; foo.link(), в то время как backtracking

: 1

: 1_1

ссылка: 1_1

ссылка: 1

: 2

ссылка: 2