La différence entre le 'contrôleur', 'link' et 'compiler' fonctions lors de la définition d'une directive

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

Peut-être une idée plus complète de la directive sur les fonctions: Angulaire des directives lors de l'utilisation de compiler, de contrôleur, de pré-link et post-lien.

OriginalL'auteur user1558259 | 2012-09-22

  1. 630

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

    • de la compilation de la fonction utiliser pour modèle de manipulation du DOM (c'est à dire, la manipulation des tElement = élément du modèle), d'où les manipulations qui s'appliquent à tous les DOM clones du modèle associé à la directive. (Si vous avez aussi besoin d'une fonction de lien (ou pré-et post-fonctions de liaison), et que vous avez défini pour la compilation de la fonction, la compilation de la fonction doit retourner la fonction de lien(s) parce que le 'link' attribut est ignoré si le 'compile' attribut n'est pas défini.)

    • fonction de lien - normalement utiliser pour l'enregistrement d'auditeur rappels (c'est à dire, $watch expressions sur le champ d'application) ainsi que la mise à jour du DOM (c'est à dire, la manipulation de iElement = instance de chaque élément). Il est exécuté après le modèle a été cloné. E. g., à l'intérieur d'un <li ng-repeat...>, la fonction de lien est exécuté après le <li> modèle (tElement) a été cloné dans une iElement) pour <li> élément. Un $watch permet une directive, d'être informés de la portée des modifications de la propriété (un champ est associé à chaque instance), ce qui permet à la directive de rendre une instance mise à jour de la valeur pour les DOM.

    • fonction de contrôleur de - doit être utilisé lorsqu'un autre directive doit interagir avec cette directive. E. g., sur le AngularJS page d'accueil, le volet de la directive doit s'ajouter à la portée maintenu par les onglets de la directive, ainsi que les onglets de la directive doit définir une méthode de contrôleur (pensez API) que le volet de la directive accès et/ou d'appel.

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

    En général, vous pouvez placer des méthodes, $watches, etc. dans le cadre de la directive du contrôleur ou de la fonction de lien. Le contrôleur exécute tout d'abord, qui, parfois, des questions (voir ce violon qui se connecte lorsque la touche ctrl et le lien de fonctions de fonctionner avec deux imbriqués les directives). Comme Josh mentionné dans un commentaire, vous voulez peut-être placer champ d'application les fonctions de manipulation à l'intérieur d'un contrôleur simplement pour des raisons de cohérence avec le reste du cadre.

    Cette explication devrait être dans les principaux AngularJS docs ou au moins une référence
    +1 bien dit, M. Rajcok.
    C'est instructif de réponse, mais je pense que c'est difficile à lire. Peut-être plus de signes de ponctuation et les petites phrases peuvent vous aider. Dans l'ensemble je suis reconnaissant pour la réponse.
    la présence d'un contrôleur d'attribut n'a aucun effet sur l' $compilateur en ce qui concerne le lien et de le compiler. Vous pouvez utiliser de la compilation et de contrôleur.
    "DOM auditeurs" ne sont PAS "(c'est à dire, $watch expressions sur le champ d'application)". L'un est à l'écoute des DOM pour des événements comme mouseover, l'autre à la portée de bien des changements. Grande différence.

    OriginalL'auteur Mark Rajcok

  2. 56

    Comme un complément de la Marque de réponse, la compilation de la fonction n'a pas accès à leur portée, mais la fonction de lien.

    Je recommande vraiment cette vidéo; La Rédaction Des Directives par Misko Hevery (le père de AngularJS), où il décrit les différences et de certaines techniques. (Différence entre la compilation de la fonction et de la fonction de lien à 14:41 marque dans la vidéo).

    +1 pour le lien vers la vidéo. Il est très instructif.
    jvandemo.com/...

    OriginalL'auteur Pixic

  3. 35
    1. d'exécuter du code avant la Compilation : utilisation contrôleur
    2. d'exécuter du code après la Compilation : utilisation Lien

    Angulaire de la convention : écrire la logique métier de contrôleur et de manipulation du DOM en lien.

    En dehors de cela, vous pouvez appeler une fonction de contrôleur de fonction de lien d'une autre directive.Par exemple vous avez 3 des directives sur mesure 

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

    et vous souhaitez accéder à des animaux à partir de l'intérieur de "léopard" de la directive.

    http://egghead.io/lessons/angularjs-directive-communication sera utile de savoir sur la directive de la communication

    "l'exécution de code avant la Compilation: utilisez la manette". Cela est incorrect; compile sera toujours exécuté avant controller.
    Vous ne voudriez pas (du moins pas de manière directe) être en mesure de l'accès des animaux à partir de votre leopard directive. Enfant directives peuvent accéder à des méthodes de contrôleur, un parent de la directive, mais, de frère, de directives (comme dans l'exemple ci-dessus) ne peut pas appeler les uns les contrôleurs.
    Des léopards vraiment un type de panthère? Aussi, sur une note de côté... Peut-on avoir un lien -- ET -- un contrôleur dans une directive?
    oui leopard/jaguars sont des panthères. et oui vous avez le lien et contrôleur au sein de la directive.
    À partir de l'angle de guide du développeur: "les Meilleures Pratiques: utilisation du contrôleur lorsque vous souhaitez exposer une API à d'autres directives. Sinon, utilisez le lien."

    OriginalL'auteur Rahul

  4. 6

    de la compilation de la fonction -

    1. est appelée avant que le contrôleur et la fonction de lien.
    2. De la compilation de la fonction, vous avez le modèle d'origine, DOM sorte que vous pouvez faire des modifications sur original DOM avant AngularJS crée une instance de celle-ci et avant la création d'une étendue
    3. ng-repeat est l'exemple parfait - syntaxe d'origine est l'élément de modèle, les éléments répétés en HTML sont des instances
    4. Il peut y avoir plusieurs élément de cas et un seul élément de modèle
    5. Champ d'application n'est pas encore disponible
    6. Compiler fonction peut renvoyer la fonction et l'objet
    7. retour d'un post (lien) la fonction est équivalente à l'enregistrement de la fonction de liaison par l'intermédiaire du lien de propriété de l'objet de configuration lors de la compilation de la fonction est vide.
    8. retourner un objet avec la fonction(s) enregistrés par le biais de pré-et post-propriétés - vous permet de contrôler le moment où une fonction de liaison doit être appelée lors de la liaison de la phase. Voir les infos avant de liaison et de post-réticulation des fonctions ci-dessous.

    syntaxe

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

    contrôleur

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

    pré - link

    1. La fonction de lien est responsable de l'enregistrement des DOM auditeurs ainsi que la mise à jour du DOM. Il est exécuté après le modèle a été cloné. C'est où la plupart de la directive logique.

    2. Vous pouvez mettre à jour le dom dans le contrôleur à l'aide angulaire.élément, mais ce n'est pas recommandé que l'élément est fourni dans le lien de la fonction

    3. Pré-link fonction est utilisée pour mettre en œuvre une logique qui s'exécute lorsque angular js a déjà compilé les éléments d'enfant, mais avant tout de l'enfant de l'élément de lien après avoir été appelé

    post-lien

    1. directive qui a seulement la fonction de lien, angulaire traite de la fonction en tant que post-lien

    2. post sera exécuté après la compilation, le contrôleur et le pré-link d'une fonction, c'est pourquoi elle est considérée comme la plus sûre et la place par défaut pour ajouter votre directive logique

    OriginalL'auteur Sunil Garg