Comment créer une directive CUSTOM dans AngularJS avec un exemple

Qu'est-ce que la directive douanière?

Une directive personnalisée dans Angular Js est une directive définie par l'utilisateur avec la fonctionnalité souhaitée. Même si AngularJS a beaucoup de directives puissantes prêtes à l'emploi, des directives personnalisées sont parfois nécessaires.

Dans ce didacticiel, vous apprendrez-

  • Comment créer une directive personnalisée?
  • Directives et portées AngularJs
  • Utilisation de contrôleurs avec des directives
  • Comment créer des directives réutilisables
  • Directives et composants AngularJS - ng-transclude
  • Directives imbriquées
  • Gestion des événements dans une directive

Comment créer une directive personnalisée?

Jetons un coup d'œil à un exemple de la façon dont nous pouvons créer une directive personnalisée.

La directive personnalisée dans notre cas va simplement injecter une balise div qui contient le texte "AngularJS Tutorial" dans notre page lorsque la directive est appelée.

Event Registration

Guru99 Global Event

Explication du code:

  1. Nous créons d'abord un module pour notre application angulaire. Cela est nécessaire pour créer une directive personnalisée car la directive sera créée à l'aide de ce module.
  2. Nous créons maintenant une directive personnalisée appelée "ngGuru" et définissons une fonction qui aura un code personnalisé pour notre directive.

Noter:-

Notez que lors de la définition de la directive, nous l'avons définie comme ngGuru avec la lettre «G» en majuscule. Et quand nous y accédons depuis notre balise div en tant que directive, nous y accédons en tant que ng-guru. Voici comment angular comprend les directives personnalisées définies dans une application. Tout d'abord, le nom de la directive personnalisée doit commencer par les lettres «ng». Deuxièmement, le symbole du trait d'union «-» ne doit être mentionné que lors de l'appel de la directive. Et troisièmement, la première lettre suivant les lettres «ng» lors de la définition de la directive peut être soit en minuscule, soit en majuscule.

  1. Nous utilisons le paramètre de modèle qui est un paramètre défini par Angular pour les directives personnalisées. En cela, nous définissons que chaque fois que cette directive est utilisée, utilisez simplement la valeur du modèle et injectez-la dans le code appelant.
  2. Ici, nous utilisons maintenant notre directive "ng-guru" créée sur mesure. Lorsque nous faisons cela, la valeur que nous avons définie pour notre modèle "
    Angular JS Tutorial
    " sera maintenant injectée ici.

Si le code est exécuté avec succès, la sortie suivante s'affiche lorsque vous exécutez votre code dans le navigateur.

Production:

  • La sortie ci-dessus montre clairement que notre directive ng-guru personnalisée, qui a le modèle défini pour afficher un texte personnalisé, s'affiche dans le navigateur.

Directives et portées AngularJs

La portée est définie comme la colle qui lie 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, elles auront par défaut accès à l'objet scope dans le contrôleur parent.

De cette manière, il devient facile pour la directive personnalisée d'utiliser les données transmises au contrôleur principal.

Regardons un exemple de la façon dont nous pouvons utiliser la portée d'un contrôleur parent dans notre directive personnalisée.

Event Registration

Guru99 Global Event

Explication du code:

  1. Nous créons d'abord un contrôleur appelé "DemoController". En cela, nous définissons une variable appelée tutorialName et l'attachons à l'objet scope dans une instruction - $ scope.tutorialName = "AngularJS".
  2. 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.
  3. Nous référençons le contrôleur dans une balise div, qui agira comme notre balise div parent. Notez que cela doit être fait en premier pour que notre directive personnalisée accède à la variable tutorialName.
  4. Nous attachons finalement simplement notre directive personnalisée "ng-guru" à notre balise div.

Si le code est exécuté avec succès, la sortie suivante s'affiche lorsque vous exécutez votre code dans le navigateur.

Production:

  • La sortie ci-dessus montre clairement que notre directive personnalisée "ng-guru" utilise la variable d'étendue tutorialName dans le contrôleur parent.

Utilisation de contrôleurs avec des directives

Angular donne la possibilité d' accéder à la variable membre du contrôleur directement à partir de directives personnalisées sans avoir besoin de l'objet de portée.

Cela devient parfois nécessaire car dans une application, vous pouvez avoir plusieurs objets de portée appartenant à plusieurs contrôleurs.

Il y a donc de fortes chances que vous fassiez l'erreur d'accéder à l'objet scope du mauvais contrôleur.

Dans de tels scénarios, il existe un moyen de mentionner spécifiquement le fait de dire "Je veux accéder à ce contrôleur spécifique" à partir de ma directive.

Jetons un coup d'œil à un exemple de la façon dont nous pouvons y parvenir.

Event Registration

Guru99 Global Event

Explication du code:

  1. Nous créons d'abord un contrôleur appelé "DemoController". En cela, 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.
  2. Dans notre directive personnalisée, nous mentionnons spécifiquement que nous voulons utiliser le contrôleur "DemoController" en utilisant le mot-clé de paramètre de contrôleur.
  3. Nous créons une référence au contrôleur à l'aide du paramètre "controllerAs". Ceci est défini par Angular et constitue le moyen de référencer le contrôleur en tant que référence.

    Remarque: - Il est possible d'accéder à plusieurs contrôleurs dans une directive en spécifiant les blocs respectifs des instructions contrôleur, controllerAs et modèle.

  4. 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.

Si le code est exécuté avec succès, la sortie suivante s'affiche lorsque vous exécutez votre code dans le navigateur.

Production:

La sortie montre clairement que la directive personnalisée accède en particulier au DemoController et à la variable membre tutorialName qui lui est attachée et affiche le texte "Angular".

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.

Disons, par exemple, que nous voulions injecter du code qui afficherait toujours les balises HTML ci-dessous sur plusieurs écrans, qui est essentiellement juste une entrée pour le «nom» et «l'âge» de l'utilisateur.

Pour réutiliser cette fonction sur plusieurs écrans sans codage à chaque fois, nous créons un contrôle maître ou une directive en angulaire pour tenir ces contrôles ("Nom" et "âge" de l'utilisateur).

Alors maintenant, au lieu de saisir le même code pour l'écran ci-dessous à chaque fois, nous pouvons en fait intégrer ce code dans une directive et intégrer cette directive à tout moment.

Voyons un exemple de la façon dont nous pouvons y parvenir.

Event Registration

Guru99 Global Event

Explication du code:

  1. Dans notre extrait de code pour une directive personnalisée, ce qui change est juste la valeur qui est donnée au paramètre de modèle de notre directive personnalisée.

    Au lieu d'une balise ou d'un texte plan cinq, nous entrons en fait le fragment entier de 2 contrôles d'entrée pour le "Nom" et "l'âge" qui doit être affiché sur notre page.

Si le code est exécuté avec succès, la sortie suivante s'affiche lorsque vous exécutez votre code dans le navigateur.

Production:

À partir de la sortie ci-dessus, nous pouvons voir que l'extrait de code du modèle de la directive personnalisée est ajouté à la page.

Directives et composants AngularJS - ng-transclude

Comme nous l'avons mentionné plus tôt, Angular est destiné à étendre les fonctionnalités du HTML. Et nous avons déjà vu comment nous pouvons avoir une injection de code en utilisant des directives réutilisables personnalisées.

Mais dans le développement d'applications Web modernes, il existe également un concept de développement de composants Web. Ce qui signifie essentiellement créer nos propres balises HTML qui peuvent être utilisées comme composants dans notre code.

Par conséquent, angular fournit un autre niveau de puissance pour étendre les balises HTML en donnant la possibilité d'injecter des attributs dans les balises HTML elles-mêmes.

Ceci est fait par la balise " ng-transclude ", qui est une sorte de paramètre pour dire à angular de capturer tout ce qui est placé à l'intérieur de la directive dans le balisage.

Prenons un exemple de la façon dont nous pouvons y parvenir.

Event Registration

Guru99 Global Event



Angular JS

Explication du code:

  1. Nous utilisons la directive pour définir une balise HTML personnalisée appelée «pane» et ajouter une fonction qui mettra du code personnalisé pour cette balise. Dans la sortie, notre balise de volet personnalisé va afficher le texte "AngularJS" dans un rectangle avec une bordure noire unie.
  2. L'attribut "transclude" doit être mentionné comme vrai, ce qui est requis par angular pour injecter cette balise dans notre DOM.
  3. Dans la portée, nous définissons un attribut title. Les attributs sont normalement définis comme des paires nom / valeur comme: name = "value". Dans notre cas, le nom de l'attribut dans notre balise HTML de volet est "title". Le symbole "@" est l'exigence d'angulaire. Ceci est fait pour que lorsque la ligne title = {{title}} est exécutée à l'étape 5, le code personnalisé de l'attribut title soit ajouté à la balise HTML du volet.
  4. Le code personnalisé pour les attributs de titre qui dessine simplement une bordure noire solide pour notre contrôle.
  5. Enfin, nous appelons notre balise HTML personnalisée avec l'attribut title qui a été défini.

Si le code est exécuté avec succès, la sortie suivante s'affiche lorsque vous exécutez votre code dans le navigateur.

Production:

  • La sortie montre clairement que l'attribut title de la balise html5 du volet a été défini sur la valeur personnalisée "Angular.JS".

Directives imbriquées

Les directives angulaires peuvent être imbriquées. Comme pour les modules ou fonctions internes de n'importe quel 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 fait en fait un appel à la directive interne pour afficher le texte appelé "Inner".



Guru99 Global Event

Explication du code:

  1. Nous créons une directive appelée "externe" qui se comportera comme notre directive parente. Cette directive fera alors un appel à la directive "interne".
  2. La restriction: «E» est requis par angulaire pour garantir que les données de la directive interne sont disponibles pour la directive externe. La lettre «E» est la forme abrégée du mot «élément».
  3. Ici, nous créons la directive interne qui affiche le texte "Inner" dans une balise div.
  4. Dans le modèle de la directive externe (étape # 4), nous appelons la directive interne. Donc ici, nous injectons le modèle de la directive interne vers la directive externe.
  5. Enfin, nous invoquons directement la directive externe.

Si le code est exécuté avec succès, la sortie suivante s'affiche lorsque vous exécutez votre code dans le navigateur.

Production:

De la sortie,

  • On peut voir que les directives externe et interne ont été appelées et que le texte des deux balises div est affiché.

Gestion des événements dans une directive

Les événements tels que les clics de souris ou les clics de bouton peuvent être gérés à partir des directives elles-mêmes. Cela se fait à l'aide de la fonction de lien. La fonction de lien est ce qui permet à la directive de s'attacher aux éléments DOM dans une page HTML.

Syntaxe:

La syntaxe de l'élément link est comme indiqué ci-dessous

ng-répéter

link: function ($scope, element, attrs)

La fonction de lien accepte normalement 3 paramètres, y compris la portée, l'élément auquel la directive est associée et les attributs de l'élément cible.

Regardons un exemple de la façon dont nous pouvons y parvenir.

Event Registration

Guru99 Global Event


Click Me

Explication du code:

  1. Nous utilisons la fonction de lien telle que définie en angulaire pour donner aux directives la possibilité d'accéder aux événements dans le DOM HTML.
  2. Nous utilisons le mot-clé 'element' car nous voulons répondre à un événement pour un élément HTML DOM, qui dans notre cas sera l'élément "div". Nous utilisons alors la fonction "bind" et disons que nous voulons ajouter des fonctionnalités personnalisées à l'événement click de l'élément. Le mot «clic» est le mot-clé, qui est utilisé pour désigner l'événement de clic de n'importe quel contrôle HTML. Par exemple, le contrôle de bouton HTML a l'événement click. Puisque, dans notre exemple, nous voulons ajouter un code personnalisé à l'événement click de notre balise "dev", nous utilisons le mot clé "click".
  3. Ici, nous disons que nous voulons remplacer le HTML interne de l'élément (dans notre cas l'élément div) par le texte «Vous m'avez cliqué!».
  4. Ici, nous définissons notre balise div pour utiliser la directive personnalisée ng-guru.

Si le code est exécuté avec succès, la sortie suivante s'affiche lorsque vous exécutez votre code dans le navigateur.

Production:

  • Initialement, le texte «Click Me» sera affiché à l'utilisateur car c'est ce qui a été initialement défini dans la balise div. Lorsque vous cliquez réellement sur la balise div, la sortie ci-dessous sera affichée

Résumé

  • On peut également créer une directive personnalisée qui peut être utilisée pour injecter du code dans l'application angulaire principale.
  • Des directives personnalisées peuvent être faites pour appeler des membres définis dans l'objet d'étendue dans un certain contrôleur en utilisant les mots-clés 'Controller', 'controllerAs' et 'template'.
  • Les directives peuvent également être imbriquées pour fournir des fonctionnalités intégrées qui peuvent être requises en fonction des besoins de l'application.
  • Les directives peuvent également être rendues réutilisables afin de pouvoir être utilisées pour injecter du code commun qui pourrait être requis dans diverses applications Web.
  • Les directives peuvent également être utilisées pour créer des balises HTML personnalisées qui auraient leur propre fonctionnalité définie selon les besoins de l'entreprise.
  • Les événements peuvent également être gérés à partir de directives pour gérer les événements DOM tels que les clics de bouton et de souris.

Articles intéressants...