Directive personnalisée AngularJS : Modèles, portée et transclusion
James Hartmann
⚡ Résumé intelligent
Les directives personnalisées d'AngularJS étendent le HTML avec un comportement réutilisable que vous définissez vous-même. Une fabrique de directives renvoie un objet de définition, et AngularJS applique ce comportement partout où l'élément, l'attribut, la classe ou le commentaire correspondant apparaît dans le balisage.
Qu'est-ce qu'une directive personnalisée dans AngularJS ?
A Directive douanière Dans AngularJS, une directive définie par l'utilisateur étend le HTML avec un comportement que vous écrivez vous-même. Elle est enregistrée sur un module En utilisant la fonction « directive », AngularJS l'applique partout où l'élément ou l'attribut correspondant apparaît dans la page. Bien qu'AngularJS possède de nombreuses fonctionnalités puissantes, il est important de noter que cette approche est particulièrement efficace. directives intégrées prêts à l'emploi, tels que ng-répétition, parfois des directives personnalisées sont nécessaires.
⚠️ Correction: Le texte original indiquait qu'une directive personnalisée « remplace l'élément auquel elle se rapporte ». Par défaut, ce n'est pas le cas : template est inséré à l'intérieur l'élément correspondant. Besoins de remplacement replace: true, obsolète depuis AngularJS 1.3.
⚠️ Avis d'assistance : AngularJS a atteint fin de vie le 31 décembre 2021 et ne reçoit plus de correctifs ni de mises à jour de sécurité. Les informations ci-dessous restent valables pour la maintenance du code AngularJS 1.x existant ; dans Angular moderne, les équivalents sont les composants et les directives d’attributs.
L'intérêt d'utiliser une directive personnalisée réside dans la répétition. Lorsqu'un même balisage ou une même structure DOM apparaît sur plusieurs écrans, une directive le transforme en une seule balise nommée.
Comment créer une directive personnalisée ?
Prenons l'exemple de la création d'une directive personnalisée AngularJS.
Dans notre cas, la directive personnalisée va simplement injecter une balise div contenant le texte « Tutoriel Angular JS » dans notre page lorsque la directive est appelée.
La capture d'écran annotée ci-dessous numérote les quatre parties de la liste expliquées ensuite.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp"> <div ng-guru=""></div> </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.directive('ngGuru',function(){ return { template: '<div>Angular JS Tutorial</div>' } }); </script> </body> </html>
⚠️ Avertissement — défauts non mentionnés dans cette annonce : Le code est reproduit à l'identique. Trois défauts se retrouvent systématiquement dans chaque exemple : chrset="UTF 8" devrait être charset="UTF-8"; angular.js et angular.min.js Les deux se chargent, donc AngularJS se charge deux fois ; et angular-route.js se charge avant le fichier dont il dépend.
Code Explication
- Nous créons d'abord un module pour notre application AngularJS. Ceci est nécessaire pour créer une directive personnalisée car celle-ci sera créée à l'aide de ce module.
- Nous sommes en train de créer une directive personnalisée appelée « ng »Guru« et en définissant une fonction de fabrique qui contiendra le code personnalisé de notre directive. »
- Nous utilisons le paramètre `template`, défini par AngularJS pour les directives personnalisées. Ainsi, chaque fois que cette directive est utilisée, la valeur du modèle est injectée dans le code appelant.
- Nous utilisons ici notre directive personnalisée « ng-guru ». Dans ce cas, la valeur que nous avons définie pour notre modèle,
<div>Angular JS Tutorial</div>, sera maintenant injecté ici.
Dénomination et normalisation des directives
La discordance des noms entre les JavaLe code JavaScript et le HTML déroutent la plupart des débutants. AngularJS normalise chaque nom d'élément et d'attribut avant de le faire correspondre : il supprime tout x- or data- préfixe, puis convertit un nom délimité par -, : or _ en camelCase. C'est pourquoi ngGuru allumettes ng-guru, et pourquoi data-ng-guru Cela fonctionne aussi. La forme camelCase est le nom correct ; la forme kebab-case est simplement la façon dont elle est écrite en HTML.
⚠️ Correction: Le texte original indiquait que le nom d'une directive personnalisée « devait commencer par les lettres 'ng' ». Documentation officielle d'AngularJS conseille le contraire : ne jamais préfixer ses propres directives par ng, ou ils pourraient entrer en conflit avec une future fonction intégrée. Utilisez votre propre préfixe, tel que g99Guru écrit comme g99-guru.
Si le code s'exécute correctement, ce résultat s'affiche.
Sortie :
Le résultat montre clairement que notre directive ng-guru personnalisée, qui contient le modèle défini pour l'affichage d'un texte personnalisé, s'affiche correctement dans le navigateur. L'étape suivante consiste à intégrer du contenu réutilisable dans ce modèle.
Comment créer des directives réutilisables
Nous avons déjà vu la puissance des directives personnalisées, mais nous pouvons passer au niveau supérieur en créant nos propres directives réutilisables.
Supposons, par exemple, que nous voulions injecter du code qui afficherait toujours les balises HTML ci-dessous sur plusieurs écrans, qui correspondent essentiellement à un champ de saisie pour le « Nom » et l’« âge » de l’utilisateur.
Pour réutiliser ce fragment sur plusieurs écrans sans avoir à le recoder à chaque fois, nous créons un contrôle principal, ou directive, dans AngularJS pour contenir ces deux contrôles.
Désormais, au lieu de répéter ce balisage sur chaque écran, nous l'intégrons dans une directive et appelons cette dernière. La capture d'écran ci-dessous indique la seule ligne modifiée.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp"> <div ng-guru=""></div> </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.directive('ngGuru',function(){ return { template: ' Name <input type="text"><br><br> Age<input type="text">' }; }); </script> </body> </html>
Code Explication
- Dans notre extrait de code pour une directive personnalisée, seule la valeur du paramètre de modèle change. Au lieu d'une simple balise ou d'une ligne de texte, nous saisissons l'intégralité des deux champs de saisie « Nom » et « Âge » qui doivent être affichés sur notre page.
💡 Astuce: Un modèle aussi long mérite d'être placé dans un fichier séparé. Échanger template pour templateUrl: 'name-age.html'.
Si le code s'exécute correctement, ce résultat s'affiche.
Sortie :
D'après le résultat ci-dessus, l'extrait de code du modèle de la directive personnalisée est bien ajouté à la page. Le modèle étant encore statique, l'étape suivante consiste à l'alimenter en données.
Directives et portées d'AngularJS
Le portée est défini comme le lien qui unit le contrôleur à la vue en gérant les données entre la vue et le contrôleur.
Lors de la création de directives AngularJS personnalisées, celles-ci auront par défaut accès à l'objet scope du contrôleur parent. Il s'agit du même objet scope, et non d'une copie.
De cette façon, il devient facile pour la directive personnalisée d'utiliser les données transmises au contrôleur principal.
Prenons l'exemple de l'utilisation de la portée d'un contrôleur parent dans notre directive personnalisée. La capture d'écran ci-dessous numérote les quatre étapes.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp" ng-controller="DemoController"> <div ng-guru=""></div> </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.controller('DemoController',function($scope) { $scope.tutorialName = "Angular JS"; }); app.directive('ngGuru',function(){ return { template: '<div>{{tutorialName}}</div>' } }); </script> </body> </html>
Code Explication
- Nous créons d'abord un contrôleur appelé « DemoController ». Dans celui-ci, nous définissons une variable appelée tutorialName et l'attachons à l'objet scope en une seule instruction :
$scope.tutorialName = "Angular JS". - Dans notre directive personnalisée, nous pouvons appeler la variable « tutorialName » en utilisant une expression. Cette variable serait accessible car elle est définie dans le contrôleur « DemoController », qui deviendrait le parent de cette directive.
- Nous référençons le contrôleur dans une balise div, qui fera office de balise div parent. Notez que cela doit être fait en premier pour que notre directive personnalisée puisse accéder à la variable tutorielName.
- Nous attachons finalement simplement notre directive personnalisée « ng-guru » à notre balise div.
Si le code s'exécute correctement, ce résultat s'affiche.
Sortie :
Le résultat ci-dessus montre clairement que notre directive personnalisée « ng-guru » utilise la variable de portée tutorialName du contrôleur parent. Partager la portée du parent est pratique, mais pas toujours souhaitable.
Utiliser des contrôleurs avec des directives
AngularJS offre la possibilité de accéder à la variable membre du contrôleur directement à partir des directives personnalisées sans avoir besoin de l'objet scope.
Cela devient parfois nécessaire car une application peut comporter plusieurs objets de portée appartenant à plusieurs contrôleurs, ce qui augmente considérablement le risque d'accéder par erreur à l'objet de portée du mauvais contrôleur.
Dans un tel scénario, il existe un moyen de dire spécifiquement « Je veux accéder à ce contrôleur » depuis ma directive.
Prenons l'exemple d'une méthode permettant d'y parvenir. La capture d'écran numérote les quatre étapes.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp" ng-controller="DemoController"> <div ng-guru99=""></div> </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.controller('DemoController',function() { this.tutorialName = "Angular"; }); app.directive('ngGuru99',function(){ return { controller: 'DemoController', controllerAs: 'ctrl', template: '{{ctrl.tutorialName}}' }; }); </script> </body> </html>
Code Explication
- Nous créons d'abord un contrôleur appelé « DemoController ». Dans celui-ci, nous définirons une variable appelée « tutorialName » et cette fois, au lieu de l'attacher à l'objet scope, nous l'attacherons directement au contrôleur.
- Dans notre directive personnalisée, nous mentionnons spécifiquement que nous souhaitons utiliser le contrôleur « DemoController » en utilisant le mot-clé de paramètre de contrôleur.
- Nous créons une référence au contrôleur à l'aide du paramètre « controllerAs ». Ce paramètre, défini par AngularJS, permet de référencer le contrôleur par un alias.
- Enfin, dans notre modèle, nous utilisons la référence créée à l'étape 3 et la variable membre qui a été attachée directement au contrôleur à l'étape 1.
À noter: Il est possible d'accéder à plusieurs contrôleurs dans une directive en spécifiant les blocs respectifs du contrôleur, du contrôleur et des instructions de modèle. Pour atteindre un mère Utilisez plutôt le contrôleur de la directive. require.
Si le code s'exécute correctement, ce résultat s'affiche.
Sortie :
Le résultat montre clairement que la directive personnalisée accède au DemoController et à la variable membre tutorialName qui lui est associée, et affiche le texte « Angular ». Les deux approches lisent toujours à partir d'une portée partagée, ce qu'une portée isolée empêche.
Comment les liaisons @, =, & et < diffèrent dans une portée isolée
Une directive qui partage la même portée que son parent ne peut être utilisée qu'une seule fois par contrôleur, car deux copies entreraient en conflit sur les mêmes variables. scope L'objet crée un isoler la portéeLa directive ne voit rien d'extérieur, hormis les propriétés que vous listez. Chaque entrée utilise un symbole de préfixe indiquant comment sa valeur est transmise.
| Symbole | Direction | Valeur reçue | Utilisez-le pour |
|---|---|---|---|
| @ | Sens unique | L'attribut sous forme de chaîne interpolée | Étiquettes, titres, tout texte brut |
| = | À double sens | L'objet ou la valeur vivante elle-même | Modèles que la directive réécrit en retour à |
| & | Appel extérieur | Une fonction évaluant une expression dans la portée extérieure | Les rappels tels que la fermeture ou l'enregistrement |
| < | Sens unique | La valeur évaluée, jamais écrite vers le haut | Données en lecture seule, ajoutées dans AngularJS 1.5 |
💡 Astuce: Atteindre pour < avant =La liaison unidirectionnelle est moins coûteuse à surveiller et empêche un composant de modifier silencieusement les données de son appelant. La section suivante utilise @.
Directives et composants AngularJS : ng-transclude
Comme nous l'avons mentionné précédemment, AngularJS est destiné à étendre les fonctionnalités de HTML. Et nous avons déjà vu comment injecter du code en utilisant des directives personnalisées réutilisables.
Mais dans le développement moderne d'applications web, il existe également un concept de développementping Les composants web, c'est-à-dire créer nos propres balises HTML qui peuvent être utilisées comme composants dans notre code.
AngularJS offre ainsi un niveau de puissance supplémentaire pour étendre les balises HTML en permettant d'encapsuler tout balisage que l'appelant place à l'intérieur de la balise.
Ceci est fait par le "ng-transclure« directive », qui indique à AngularJS de capturer tout ce qui est placé à l'intérieur de la balise personnalisée dans le balisage et de l'insérer dans le modèle à cet endroit.
Prenons un exemple pour illustrer comment y parvenir. La capture d'écran numérote les cinq points suivants.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp"> <pane title="{{title}}">Angular JS</pane> </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.directive('pane',function(){ return { transclude:true, scope :{title:'@'}, template: '<div style="border: 1px solid black;"> '+ '<ng-transclude></ng-transclude>'+ '</div>' }; }); </script> </body> </html>
Code Explication
- Nous utilisons la directive pour définir une balise HTML personnalisée appelée « pane », dont le code est fourni par une fonction de fabrique. Dans le résultat, la balise « pane » affiche le texte « Angular JS » dans un rectangle bordé de noir.
- La propriété « transclude » doit être définie sur true, ce qui indique à AngularJS de conserver le balisage interne d'origine et de le rendre disponible à
ng-transclude. - Dans l'objet scope, nous déclarons une liaison de titre. Les attributs sont généralement écrits sous forme de paires nom/valeur, comme ceci :
name="value"Dans notre cas, l'attribut de la balise pane est « title », et le symbole « @ » demande à AngularJS de copier cet attribut sous forme de chaîne interpolée. - Le modèle trace la bordure noire continue de notre contrôle et marque l'endroit où le balisage transclus est inséré.
- Enfin, nous appelons notre balise HTML personnalisée avec l'attribut title qui a été défini.
⚠️ Correction: Le texte original décrivait « @ » comme « une exigence d'Angular ». Il ne s'agit pas d'une simple formalité : @ est l'un des quatre symboles de liaison à portée isolée du tableau ci-dessus et produit toujours une chaîne de caractères. Ce modèle ne génère jamais non plus {{title}}et aucun contrôleur ne définit title, donc seul le texte transclus est visible.
Si le code s'exécute correctement, ce résultat s'affiche.
Sortie :
- Le résultat affiche l'élément de panneau personnalisé rendu sous forme de boîte bordée contenant le texte transclus « Angular JS ».
Une directive peut également contenir d'autres directives, ce qui permet d'assembler des composants plus importants.
Directives imbriquées
Dans AngularJS, les directives peuvent être imbriquées, à l'instar des modules ou fonctions internes. langage de programmation, vous devrez peut-être intégrer des directives les unes dans les autres.
Vous pouvez mieux comprendre cela en consultant l’exemple ci-dessous.
Dans cet exemple, nous créons 2 directives appelées « externe » et « interne ».
- La directive interne affiche un texte appelé « Inner ».
- Alors que la directive externe appelle en fait la directive interne pour afficher le texte appelé « Inner ».
La capture d'écran ci-dessous indique les deux définitions de directive et le point où l'une appelle l'autre.
</head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp"> <outer></outer> </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.directive('outer',function(){ return { restrict:'E', template: '<div><h1>Outer</h1><inner></inner></div>', }}); app.directive('inner',function(){ return { restrict:'E', template: '<div><h1>Inner</h1></div>', } }); </script> </body> </html>
⚠️ Avertissement — défaut conservé dans cette annonce : La liste publiée commence à </head>, manquant son ouverture <!DOCTYPE html>, <html> et <head> lignes. Ajoutez-les avant d'exécuter le programme.
Code Explication
- Nous créons une directive appelée « externe » qui se comportera comme notre directive parent. Cette directive fera alors appel à la directive « intérieure ».
- Le
restrict:'E'Cette option indique à AngularJS de faire correspondre chaque directive par un élément nom, c'est pourquoi ils peuvent être écrits comme des étiquettes<outer>et<inner>La lettre « E » est l'abréviation du mot « Element ». - Ici, nous créons la directive interne qui affiche le texte « Inner » dans une balise div.
- Dans le modèle de la directive externe, nous appelons la directive interne. Nous injectons donc ici le modèle de la directive interne dans la directive externe.
- Enfin, nous appelons directement la directive extérieure.
⚠️ Correction: Le texte original prétendait restrict:'E' est requis « pour garantir que les données de la directive interne soient disponibles pour la directive externe ». Il ne fait rien de tel ; il ne fait que contrôler how Une directive peut être écrite. L'imbrication fonctionne car le compilateur continue d'entrer dans le modèle qu'il vient d'insérer. Pour partager des données, utilisez require et controller.
Si le code s'exécute correctement, ce résultat s'affiche.
Sortie :
De la sortie,
- On constate que les directives externe et interne ont toutes deux été appelées, et que le texte des deux balises div est affiché.
Le rendu du balisage ne représente que la moitié du travail d'une directive ; l'autre moitié consiste à réagir à l'utilisateur.
Gestion des événements dans une directive
Événements Les actions telles que les clics de souris ou de boutons peuvent être gérées directement depuis les directives. Ceci est réalisé grâce à la fonction `link`. Cette fonction permet à la directive de s'associer aux éléments DOM d'une page HTML.
syntaxe:
La syntaxe de la fonction lien est présentée ci-dessous.
link: function ($scope, element, attrs)
La fonction de lien accepte généralement trois paramètres : la portée, l’élément auquel la directive est associée et les attributs de l’élément cible. Deux autres paramètres, un contrôleur requis et une fonction de transclusion, sont fournis lorsqu’ils sont utilisés.
Phase de compilation versus phase de liaison
AngularJS traite une directive en deux passes, et savoir laquelle est laquelle vous indique où votre code doit être placé.
- Compiler Cette fonction s'exécute une seule fois sur l'élément modèle, avant toute définition de portée. Elle convient aux modifications structurelles partagées par tous les clones.
- Lien Cette fonction s'exécute une seule fois par instance, après le clonage du modèle et l'association d'une portée. Les écouteurs DOM et les lectures de portée doivent être effectués ici.
Étant donné que la compilation n'a pas de portée, tout ce qui nécessite des données doit être intégré à l'édition de liens, c'est pourquoi l'exemple ci-dessous définit link seul.
Prenons un exemple pour illustrer comment nous pouvons y parvenir. La capture d'écran numérote les quatre points ci-dessous.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp"> <div ng-guru="">Click Me</div> </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.directive('ngGuru',function(){ return { link:function($scope,element,attrs) { element.bind('click',function () { element.html('You clicked me'); });} }}); </script> </body> </html>
Code Explication
- Nous utilisons la fonction link telle que définie dans AngularJS pour donner à la directive la possibilité d'accéder aux événements du DOM HTML.
- Nous utilisons le mot-clé « element » car nous souhaitons réagir à un événement lié à un élément DOM HTML, en l'occurrence l'élément « div ». Nous utilisons ensuite la fonction « bind » pour personnaliser l'événement de clic de cet élément. Le mot-clé « click » désigne l'événement de clic de n'importe quel contrôle HTML.
- Nous indiquons ici que nous voulons remplacer le code HTML interne de l'élément, dans notre cas l'élément div, par le texte « Vous avez cliqué sur moi ».
- Ici, nous définissons notre balise div pour utiliser la directive personnalisée ng-guru.
💡 Astuce: Une directive doit se nettoyer elle-même. Supprimez tout écouteur qui survit à l'élément qu'elle contient. element.on('$destroy', ...), ou la page présente une fuite de mémoire.
Si le code s'exécute correctement, ce résultat s'affiche.
Sortie :
- Au départ, le texte « Cliquez ici » s'affiche, car c'est ce qui était défini dans la balise div. Lorsque vous cliquez sur la balise div, le résultat ci-dessous s'affiche.
Chaque exemple ci-dessus utilisait une ou deux propriétés du même objet de définition. L'ensemble complet mérite d'être conservé.ping à portée de main.
Référence des propriétés d'objet de définition de directive
L'objet renvoyé par une fabrique de directives est le Objet de définition de directiveChaque propriété répond à une question sur le comportement de la directive.
| Propriétés | Réglage par défaut | Ce qu'il fait |
|---|---|---|
| restreindre | 'EA' | Quelles formes correspondent : E élément, A attribut, C classe, M commentaire |
| modèle | aucun | Balisage en ligne inséré dans l'élément correspondant |
| URL du modèle | aucun | Chemin du fichier modèle, récupéré une seule fois puis mis en cache |
| portée | non | false partage la portée parente, true crée un enfant, un objet isole |
| contrôleur | aucun | Constructeur exposant une API ; d’autres directives peuvent être requises |
| contrôleur | aucun | Alias du contrôleur à l'intérieur du modèle |
| exigent | aucun | Contrôleur d'une autre directive à injecter ; ^ recherche les parents, ^^ ignore la directive elle-même, ? optionnel |
| lien | aucun | Fonction par instance : portée, élément, attributs, contrôleur, transcludeFn |
| compiler | aucun | S'exécute une fois sur le modèle avant que toute portée ne soit établie. |
| transclure | non | Préserve le balisage interne d'origine pour ng-transclude |
| priorité | 0 | Ordre de compilation sur un élément partagé ; les éléments les plus importants sont exécutés en premier. |
| terminal | non | Bloque les directives de priorité inférieure sur cet élément |
| remplacer | non | Remplace l'élément par le modèle. Déprécié depuis la version 1.3. |
💡 Astuce: Préparer : restrict, template et link. Ajouter scope pour réutilisation, controller et require pour les appels directifs, et laissez priority et terminal seul.
