Directives PERSONNALISÉES dans AngularJS : comment créer ? [Exemples]

Qu'est-ce que la directive personnalisée ?

A Directive douanière dans AngularJS est une directive définie par l'utilisateur qui permet aux utilisateurs d'utiliser les fonctions souhaitées pour étendre les fonctionnalités HTML. Il peut être défini à l'aide de la fonction « directive » et remplace l'élément pour lequel il est utilisé. Même si AngularJS dispose de nombreuses directives puissantes prêtes à l'emploi, des directives personnalisées sont parfois nécessaires.

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

La directive personnalisée dans notre cas va simplement injecter une balise div qui contient le texte « Tutoriel AngularJS » dans notre page lorsque la directive est appelé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: '<div>Angular JS Tutorial</div>'
    }
    });

</script>

</body>
</html>

Explication du code

Nous créons d'abord un module pour notre application angulaire. Ceci est nécessaire pour créer une directive personnalisée car la directive sera créée à l'aide de ce module.
Nous créons maintenant une directive personnalisée appelée « ngGuru » et définissons une fonction qui aura un code personnalisé pour notre directive.Remarque: - Notez que lors de la définition de la directive, nous l'avons définie comme ngGuru avec la lettre « G » en majuscule. Et lorsque nous y accédons depuis notre balise div en tant que directive, nous y accédons en tant que ng-guru. C'est ainsi qu'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 trait d'union « - » ne doit être mentionné que lors de l'appel de la directive. Et troisièmement, la première lettre qui suit les lettres « ng » lors de la définition de la directive peut être soit en minuscule, soit en majuscule.
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.
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 " Tutoriel JS angulaire » sera désormais injecté ici.

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

Sortie :

La sortie ci-dessus montre clairement que notre directive ng-guru personnalisée, dont le modèle est défini pour afficher un texte personnalisé, est affichée dans le navigateur.

Directives et portées d'AngularJs

La portée est définie comme le ciment 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 façon, il devient facile pour la directive personnalisée d'utiliser les données transmises au contrôleur principal.

Examinons un exemple de directive personnalisée AngularJS montrant comment nous pouvons utiliser la portée d'un contrôleur parent dans notre directive personnalisé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" 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>

Explication du code

Nous créons d’abord un contrôleur appelé « DemoController ». En cela, nous définissons une variable appelée tutorielName et l'attachons à l'objet scope dans une seule instruction – $scope.tutorialName = « AngularJS ».
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 est exécuté avec succès, la sortie suivante s'affichera lorsque vous exécutez votre code dans le navigateur.

Sortie :

Le résultat ci-dessus montre clairement que notre directive personnalisée « ng-guru » utilise la variable de portée tutorielName dans le contrôleur parent.

Utiliser des contrôleurs avec des directives

Angular donne 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 dans une application, vous pouvez avoir plusieurs objets de portée appartenant à plusieurs contrôleurs.

Il y a donc de fortes chances que vous commettiez 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 « Je souhaite accéder à ce contrôleur spécifique » à partir de ma directive.

Jetons un coup d'œil à un exemple de la manière dont nous pouvons y parvenir.

<!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>

Explication du code

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.
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 en utilisant le paramètre « controllerAs ». Ceci est défini par Angular et constitue le moyen de référencer le contrôleur comme référence.

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

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'affichera lorsque vous exécutez votre code dans le navigateur.

Sortie :

La sortie montre clairement que la directive personnalisée accède en particulier au DemoController et à la variable membre tutorielName 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, ce qui est essentiellement une simple entrée pour le « Nom » et « l'âge » de l'utilisateur.

Pour réutiliser cette fonction sur plusieurs écrans sans coder à chaque fois, on crée un contrôle maître ou une directive en angulaire pour contenir ces contrôles (« Nom » et « âge » de l'utilisateur).

Alors maintenant, au lieu de saisir à chaque fois le même code pour l’écran ci-dessous, nous pouvons 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.

<!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: '&nbsp;&nbsp;Name <input type="text"><br><br>&nbsp;&nbsp;&nbsp;Age<input type="text">'
        };
    });

</script>

</body>
</html>

Explication du code

Dans notre extrait de code pour une directive personnalisée, ce qui change est simplement 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 de plan cinq, nous saisissons en fait le fragment entier de 2 contrôles d'entrée pour le " Nom » et « âge » qui doivent être affichés sur notre page.

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

Sortie :

À partir du résultat 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 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 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, angulaire 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 le "ng-transclure", qui est une sorte de paramètre pour indiquer à angulaire de capturer tout ce qui est mis à l'intérieur de la directive dans le balisage.

Prenons un exemple de la manière dont nous pouvons y parvenir.

<!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>

Explication du code

Nous utilisons la directive pour définir une balise HTML personnalisée appelée « volet » et ajoutons une fonction qui mettra du code personnalisé pour cette balise. Dans la sortie, notre balise de volet personnalisée va afficher le texte « AngularJS » dans un rectangle avec une bordure noire unie.
L'attribut « transclude » doit être mentionné comme vrai, ce qui est requis par angulaire pour injecter cette balise dans notre DOM.
Dans la portée, nous définissons un attribut title. Les attributs sont normalement définis sous forme de paires nom/valeur telles que : name="value". Dans notre cas, le nom de l’attribut dans la balise HTML de notre volet est « titre ». Le symbole « @ » est l'exigence d'angular. Ceci est fait de sorte que lorsque la ligne title={{title}} est exécutée à l'étape 5, le code personnalisé pour l'attribut title soit ajouté à la balise HTML du volet.
Le code personnalisé pour les attributs de titre qui dessine simplement une bordure noire unie pour notre contrôle.
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'affichera lorsque vous exécutez votre code dans le navigateur.

Sortie :

Le résultat 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 dans AngularJS peuvent être imbriquées. Comme de simples modules ou fonctions internes dans 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 appelle en fait la directive interne pour afficher le texte appelé « Inner ».

</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>

Explication du code

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' 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 ».
Ici, nous créons la directive interne qui affiche le texte « Inner » dans une balise div.
Dans le modèle de directive externe (étape 4), nous appelons la directive interne. Donc ici, nous injectons le modèle de la directive interne vers la directive externe.
Enfin, nous appelons directement la directive extérieure.

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

Sortie :

De la sortie,

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

Gestion des événements dans une directive

Événements ces clics de souris ou de boutons 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 d'une page HTML.

syntaxe:

La syntaxe de l'élément de lien est la suivante

ng-répétition

link: function ($scope, element, attrs)

La fonction de lien accepte normalement 3 paramètres dont 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.

<!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>

Explication du code

Nous utilisons la fonction de lien telle que définie en angulaire pour donner la possibilité aux directives d'accéder aux événements dans le DOM HTML.
Nous utilisons le mot-clé 'element' car nous voulons répondre à un événement pour un élément HTML DOM, qui est dans notre cas l'élément « div ». Nous utilisons alors la fonction « bind » et disons que nous voulons ajouter une fonctionnalité personnalisée à l'événement click de l'élément. Le mot « clic » est le mot-clé utilisé pour désigner l'événement de clic de n'importe quel contrôle HTML. Par exemple, le contrôle bouton HTML possède l’événement click. Puisque, dans notre exemple, nous souhaitons ajouter un code personnalisé à l'événement click de notre balise « dev », nous utilisons le mot-clé « click ».
Ici, nous disons que nous voulons remplacer le code HTML interne de l'élément (dans notre cas, l'élément div) par le texte « Vous m'avez cliqué ! ».
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'affichera lorsque vous exécutez votre code dans le navigateur.

Sortie :

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 s'affichera

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 créées pour appeler les membres définis dans l'objet scope dans un certain contrôleur à l'aide des 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 exigences 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.

Tu pourrais aimer:

Qu'est-ce que la directive personnalisée ?

Comment créer une directive personnalisée ?

Explication du code

Directives et portées d'AngularJs

Explication du code

ARTICLES LIÉS

Utiliser des contrôleurs avec des directives

Explication du code

Comment créer des directives réutilisables

Explication du code

Directives et composants AngularJS – ng-transclude

Explication du code

Directives imbriquées

Explication du code

Gestion des événements dans une directive

Explication du code

Résumé