Quand devons-nous utiliser `preLink` de la fonction de compilation de la directive ?

Question

Les compile de la directive angularjs a deux fonctions : preLink y postLink .

Fonction de préliaison

Exécuté avant que les éléments enfants ne soient liés. Il n'est pas sûr d'effectuer une transformation DOM car la fonction de liaison du compilateur ne parviendra pas à localiser les éléments corrects pour la liaison.

Fonction de post-lien

Exécuté après la liaison des éléments enfants. Il n'est pas dangereux d'effectuer une transformation du DOM dans la fonction de post-liaison.

Il indique ce qu'il ne faut pas faire en preLink Je me demande ce que je dois utiliser et quand je dois le faire. preLink ? La plupart du temps, j'ai simplement utilisé postLink . Y a-t-il un cas où nous devons l'utiliser ?

Answer 1

Vous n'avez presque jamais besoin d'utiliser preLink . Les cas viables sont ceux où il est nécessaire de manipuler des données dans le champ d'application, mais pas le DOM , avant link (ainsi que d'autres directives) sont exécutées.

Comme l'a fait remarquer Jacob, vous pouvez toujours le faire à partir d'un contrôleur, mais il est parfois plus approprié d'avoir le code dans la directive elle-même.

Il existe un excellent article sur le fonctionnement des directives dans lequel l'ordre de liaison est bien expliqué : http://www.jvandemo.com/the-nitty-gritty-of-compile-and-link-functions-inside-angularjs-directives/

Si vous avez besoin d'un bon exemple pour comprendre pourquoi il est parfois nécessaire d'établir des liens préalables, je vous recommande de regarder le code des directives angulaires elles-mêmes. Par exemple https://github.com/angular/angular.js/blob/master/src/ng/directive/ngModel.js

Answer 2

A preLink est utilisée lorsque la directive veut mettre quelque chose dans un fichier partagé afin qu'il soit prêt à être utilisé par d'autres directives dans leur champ d'application. postLink fonctions.

La directive de formulaire d'Angular, par exemple, crée un objet qui contient des entrées pour toutes les données. Une directive personnalisée pourrait accéder en toute sécurité à cet objet dans une directive postLink fonction.

Answer 3

J'ai dû utiliser preLink lors de la création de directives personnalisées incluant d'autres directives. Dans mon cas, ma directive incluait un modèle qui appliquait la directive Typeahead d'Angular UI Bootstrap à certains de ses éléments et utilisait ses propres variables de portée pour initialiser les fonctionnalités de Typeahead.

Par exemple :

...
template:
    "<select ng-show='dropdown' class='form-control' ng-model='ngModel' ng-options='s for s in suggestions'></select>"
    + "<textarea ng-show='!dropdown' class='form-control' ng-model='ngModel' typeahead='s for s in suggestions |filter:$viewValue' typeahead-min-length='0' typeahead-editable='{{editable}}'></textarea>",
...

Dans ce cas, Angular lie les directives enfants avant le parent, j'ai donc eu besoin d'utiliser preLink pour configurer le typeahead. Lorsque j'ai initialisé les variables $scope.dropdown et $scope.editable dans la fonction postLink des directives, j'ai constaté qu'elles n'étaient pas initialisées lorsque les directives typeahead étaient liées et j'ai dû déplacer leur initialisation dans la fonction preLink pour que cette directive fonctionne correctement.