web-dev-qa-db-fra.com

Différence entre les fonctions 'controller', 'link' et 'compile' lors de la définition d'une directive

Certains endroits semblent utiliser la fonction de contrôleur pour la logique directive et d'autres utilisent le lien. L'exemple d'onglets de la page d'accueil angular utilise le contrôleur pour un et le lien pour une autre directive. Quelle est la différence entre les deux?

javascriptangularjsweb-applicationsjavascript-framework
390
user1558259

Je vais développer un peu votre question et inclure également la fonction de compilation.

  • fonction de compilation - à utiliser pour les modèles , tels que la manipulation de tElement = élément de modèle, donc manipulations qui s’appliquent à tous les clones DOM du modèle associé à la directive. (Si vous avez également besoin d'une fonction de liaison (ou de fonctions de liaison antérieures et postérieures) et que vous avez défini une fonction de compilation, celle-ci doit renvoyer la ou les fonctions de liaison car l'attribut 'link' est ignoré si 'compile' attribut est défini.)

  • link function - normalement utilisé pour enregistrer les rappels d'auditeur (c'est-à-dire les expressions $watch sur l'étendue) ainsi que pour mettre à jour le DOM (c'est-à-dire la manipulation de iElement = élément individuel ) Il est exécuté après le clonage du modèle. Par exemple, à l'intérieur d'un <li ng-repeat...>, la fonction de liaison est exécutée après le clonage du modèle <li> (tElement) (dans un iElement) pour cet élément <li> particulier. Un $watch permet à une directive d'être notifiée des modifications de propriétés de portée (une portée est associée à chaque instance), ce qui permet à la directive de restituer une valeur d'instance mise à jour au DOM.

  • fonction de contrôleur - doit être utilisée lorsqu'une autre directive doit interagir avec cette directive. Par exemple, sur la page d'accueil d'AngularJS, la directive Pane doit s'ajouter à la portée maintenue par la directive tabs. Par conséquent, la directive Tabs doit définir une méthode de contrôleur (think API) à laquelle la directive Pane peut accéder/appeler.

    Pour une explication plus détaillée des directives de volet et des onglets et expliquer pourquoi la directive de tabulation crée une fonction sur son contrôleur à l'aide de this (plutôt que sur $scope), veuillez vous reporter à - 'this' vs $ scope dans les contrôleurs AngularJS .

En général, vous pouvez mettre des méthodes, $watches, etc. dans le contrôleur ou la fonction de liaison de la directive. Le contrôleur s'exécutera en premier, ce qui est parfois important (voir this fiddle qui enregistre lorsque les fonctions ctrl et link sont exécutées avec deux directives imbriquées). Comme Josh l'a mentionné dans un commentaire , vous pouvez éventuellement placer des fonctions de manipulation de la portée dans un contrôleur, par souci de cohérence avec le reste du cadre.

630
Mark Rajcok

En complément de la réponse de Mark, la fonction de compilation n'a pas accès à la portée, mais la fonction de lien en a.

Je recommande vraiment cette vidéo; Rédaction de directives de Misko Hevery (le père d’AngularJS), où il décrit les différences et certaines techniques. (Différence entre la fonction de compilation et la fonction de liaison en repère 14:41 dans la vidéo ).

56
Pixic
  1. le code en cours avant la compilation: utilisez le contrôleur
  2. le code en cours après la compilation: utilisez Link

Convention angulaire: écrire la logique métier dans le contrôleur et la manipulation du DOM dans le lien.

En dehors de cela, vous pouvez appeler une fonction de contrôleur à partir de la fonction de liaison d'une autre directive. Par exemple, vous avez 3 directives personnalisées.

<animal>
<panther>
<leopard></leopard>
</panther> 
</animal>

et vous voulez accéder à un animal de l'intérieur de la directive "léopard".

http://egghead.io/lessons/angularjs-directive-communication vous aidera à connaître la communication inter-directive

35
Rahul

fonction de compilation -

  1. est appelé avant le contrôleur et la fonction de liaison.
  2. Dans la fonction de compilation, vous avez le modèle DOM d'origine afin que vous puissiez apporter des modifications à ce dernier avant que AngularJS n'en crée une instance et avant la création d'une portée.
  3. ng-repeat est un exemple parfait - la syntaxe originale est un élément template, les éléments répétés en HTML sont des instances
  4. Il peut y avoir plusieurs occurrences d'élément et un seul élément de modèle.
  5. Scope n'est pas encore disponible
  6. La fonction de compilation peut renvoyer la fonction et l'objet
  7. renvoyer une fonction (post-link) - équivaut à enregistrer la fonction de liaison via la propriété link de l'objet config lorsque la fonction de compilation est vide.
  8. renvoyer un objet avec une ou plusieurs fonctions enregistrées via les propriétés pre et post - vous permet de contrôler le moment où une fonction de liaison doit être appelée pendant la phase de liaison. Voir les informations sur les fonctions de pré-liaison et de post-liaison ci-dessous.

syntaxe

function compile(tElement, tAttrs, transclude) { ... }

contrôleur

  1. appelé après la fonction de compilation
  2. la portée est disponible ici
  3. peut être accédé par d'autres directives (voir l'attribut require)

pré-lien

  1. La fonction de liaison est responsable de l’enregistrement des écouteurs DOM ainsi que de la mise à jour du DOM. Il est exécuté après le clonage du modèle. C’est là que l’on mettra l’essentiel de la logique directive.

  2. Vous pouvez mettre à jour le dom dans le contrôleur à l'aide de angular.element, mais cela n'est pas recommandé car l'élément est fourni dans la fonction de liaison.

  3. La fonction de pré-lien est utilisée pour implémenter une logique qui s'exécute lorsque angular js a déjà compilé les éléments enfants, mais avant qu'aucun lien post de l'élément enfant n'ait été appelé.

post-link

  1. directive qui n'a que la fonction link, angular traite la fonction comme un lien post

  2. post sera exécuté après la compilation, le contrôleur et la fonction de pré-lien, c’est pourquoi il est considéré comme l’endroit le plus sûr et le plus sûr pour ajouter votre logique de directive

6
Sunil Garg