Proces inicjalizacji w obszarze dyrektyw przebiega mniej więcej w następujący sposób:
- AngularJS identyfikuje wszystkie dyrektywy w zakresie aplikacji określonym przez dyrektywę
ng-app
. - Dla każdej znalezionej dyrektywy przeprowadza proces transformacji na podstawie reguł określonych w dyrektywie (
template
,transclude
,require
,scope
, itd). - W następnej kolejności wykonuje kompilację za pomocą
compile()
, o ile taka funkcja została zdefiniowana (faza kompilacji). - Na koniec wywoływana jest funkcja
link()
, o ile została zdefiniowana (faza łączenia).
Składnia funkcji compile()
:
compile: function compile(tElement, tAttrs, transclude) { return { pre: function preLink(scope, iElement, iAttrs, controller) { ... }, post: function postLink(scope, iElement, iAttrs, controller) { ... } } }
Składnia funkcji link()
:
link: function postLink(scope, iElement, iAttrs) { ... }
Faza kompilacji zatem:
- podczas tej fazy wykonywana jest transformacja szablonu
- wykonywana jest jednokrotnie dla dyrektywy (szablonu)
- nie ma dostępu do
scope
– w fazie kompilacji obiekt scope jeszcze nie istnieje - ma dostęp do DOM oraz do listy atrybutów z szablonu
- ma dostęp do
transclude
- może zwrócić
preLink()*
ipostLink()*
Faza łączenia:
- podczas tej fazy następuje modyfikacja danych wyświetlanych w widoku, zwykle tworzone są również komponenty nasłuchujące
- wykonywana jest wielokrotnie – po jednym razie dla każdego egzemplarza dyrektywy
- ma dostęp do elementu
scope
- ma dostęp do DOM oraz do listy atrybutów z widoku
- może zwrócić tylko
postLink()
*
*Funkcja preLink()
wykonywana jest po fazie kompilacji, ale przed łączeniem dyrektyw w elementach potomnych.
*Funkcja postLink()
wykonywana jest po łączeniu wszystkich dyrektyw w elementach potomnych – jeśli zachodzi potrzeba zmiany struktury elementu w DOM, należy to zrobić w fazie postLink()
.