Que se passe-t-il d'autre entre ces appels de fonction?
Les diverses fonctions de directive sont exécutées à partir de deux autres fonctions angulaires appelées $compile
(où la directive compile
est exécutée) et une fonction interne appelée nodeLinkFn
(où celle de la directive controller
, preLink
et postLink
sont exécutées). Diverses choses se produisent dans la fonction angulaire avant et après l'appel des fonctions directives. Peut-être plus particulièrement est la récursivité enfant. L'illustration simplifiée suivante montre les étapes clés des phases de compilation et de liaison:
Pour illustrer ces étapes, utilisons le balisage HTML suivant:
<div ng-repeat="i in [0,1,2]">
<my-element>
<div>Inner content</div>
</my-element>
</div>
Avec la directive suivante:
myApp.directive( 'myElement', function() {
return {
restrict: 'EA',
transclude: true,
template: '<div>{{label}}<div ng-transclude></div></div>'
}
});
Compiler
L' compile
API ressemble à ceci:
compile: function compile( tElement, tAttributes ) { ... }
Souvent, les paramètres sont préfixés t
pour signifier que les éléments et les attributs fournis sont ceux du modèle source, plutôt que ceux de l'instance.
Avant l'appel au compile
contenu transclus (le cas échéant) est supprimé et le modèle est appliqué au balisage. Ainsi, l'élément fourni à la compile
fonction ressemblera à ceci:
<my-element>
<div>
"{{label}}"
<div ng-transclude></div>
</div>
</my-element>
Notez que le contenu transclus n'est pas réinséré à ce stade.
Après l'appel à la directive .compile
, Angular traversera tous les éléments enfants, y compris ceux qui viennent d'être introduits par la directive (les éléments de modèle, par exemple).
Création d'instance
Dans notre cas, trois instances du modèle source ci-dessus seront créées (par ng-repeat
). Ainsi, la séquence suivante s'exécutera trois fois, une fois par instance.
Manette
L' controller
API implique:
controller: function( $scope, $element, $attrs, $transclude ) { ... }
En entrant dans la phase de liaison, la fonction de liaison renvoyée via $compile
est désormais dotée d'une étendue.
Tout d'abord, la fonction de liaison crée une portée enfant ( scope: true
) ou une portée isolée ( scope: {...}
) si elle est demandée.
Le contrôleur est ensuite exécuté, avec la portée de l'élément d'instance.
Pré-lien
L' pre-link
API ressemble à ceci:
function preLink( scope, element, attributes, controller ) { ... }
Il ne se passe pratiquement rien entre l'appel à la directive .controller
et la .preLink
fonction. Angular fournit toujours des recommandations sur la façon dont chacun doit être utilisé.
Après l' .preLink
appel, la fonction de liaison traversera chaque élément enfant - en appelant la fonction de lien correcte et en y attachant la portée actuelle (qui sert de portée parent pour les éléments enfants).
Post-lien
L' post-link
API est similaire à celle de la pre-link
fonction:
function postLink( scope, element, attributes, controller ) { ... }
Il convient peut-être de noter qu'une fois la .postLink
fonction d' une directive appelée, le processus de liaison de tous ses éléments enfants est terminé, y compris toutes les .postLink
fonctions enfants .
Cela signifie qu'au moment de l' .postLink
appel, les enfants sont «vivants» sont prêts. Ceci comprend:
- liaison de données
- transclusion appliquée
- portée attachée
Le modèle à ce stade ressemblera donc à ceci:
<my-element>
<div class="ng-binding">
"{{label}}"
<div ng-transclude>
<div class="ng-scope">Inner content</div>
</div>
</div>
</my-element>