web-dev-qa-db-fra.com

Comment comprendre le «terminal» de la directive?

Dans cette page: http://docs.angularjs.org/guide/directive

Objet de définition de directive

terminal

Si la valeur est true, la priorité actuelle sera le dernier ensemble de directives à exécuter (toutes les directives à la priorité actuelle seront toujours exécutées car l'ordre d'exécution sur la même priorité n'est pas défini).

Je ne le comprends pas bien. Qu'est-ce que current priority signifier? S'il existe de telles directives:

  1. directive1 avec {priorité: 1, terminal: faux}
  2. directive2 avec {priorité: 10, terminal: faux}
  3. directive3 avec {priorité: 100, terminal: faux}
  4. directive4 avec {priorité: 100, terminal: vrai} // c'est vrai
  5. directive5 avec {priorité: 1000, terminal: faux}

Veuillez noter le directive4 a terminal:true et d'autres ont false.

S'il y a une balise html a toutes les 5 directives:

<div directive1 directive2 directive3 directive4 directive5></div>

Quel est l'ordre d'exécution des 5 directives?

angularjsangularjs-directive
64
Freewind

Priorité

La priorité n'est pertinente que lorsque vous avez plusieurs directives sur un élément. La priorité détermine dans quel ordre ces directives seront appliquées/démarrées. Dans la plupart des cas, vous n'avez pas besoin d'une priorité, mais parfois lorsque vous utilisez la fonction de compilation, vous voulez vous assurer que votre fonction de compilation s'exécute en premier.

Terminal

La propriété de terminal n'est également pertinente que pour les directives qui se trouvent sur le même élément HTML. Autrement dit, si vous avez <div my-directive1></div> <div my-directive2></div>, priority et terminal dans vos directives my-directive1 et my-directive2 n'affecteront pas les uns les autres. Ils ne s'influenceront que si vous avez <div my-directive1 my-directive2></div>.

La propriété du terminal indique à Angular d'ignorer toutes les directives sur cet élément qui le suit (priorité inférieure). Donc, ce code pourrait le clarifier:

myModule.directive('myDirective1', function() {
    return {
        priority: 1,
        terminal: false,
        link: function() {
            console.log("I'm myDirective1");
        }
    }
});

myModule.directive('myDirective2', function() {
    return {
        priority: 10,
        terminal: true,
        link: function() {
            console.log("I'm myDirective2");
        }
    }
});

myModule.directive('myDirective3', function() {
    return {
        priority: 100,
        terminal: false,
        link: function() {
            console.log("I'm myDirective3");
        }
    }
});

Pour cela, vous ne voyez que "I'm myDirective2" et "I'm myDirective3" dans la console.

<div my-directive1 my-directive2 my-directive3></div>

Mais pour cela, vous verriez également "I'm myDirective1", car ils sont sur différents éléments.

<div my-directive1></div>
<div my-directive2></div>
<div my-directive3></div>

Message d'origine

Dans votre exemple, les directives de priorité 100 et 1000 sont les seules qui seront appliquées, car une directive de priorité supérieure est appliquée en premier, donc celle de priorité 1000 sera appliquée en premier.

Si vous avez deux directives avec la priorité 100 dans ce cas, les deux seront appliquées car l'ordre des directives avec la même priorité n'est pas défini.

Notez que cela ne s'applique qu'aux directives qui se trouvent sur le même élément.

146
Anders Ekdahl