CUSTOM-direktiver i AngularJS: Hvordan opretter man? [Eksempler]

Hvad er brugerdefineret direktiv?

A Tolddirektiv i AngularJS er et brugerdefineret direktiv, der giver brugerne mulighed for at bruge de ønskede funktioner til at udvide HTML-funktionaliteten. Det kan defineres ved at bruge funktionen "direktiv", og det erstatter det element, som det bruges til. Selvom AngularJS har en masse kraftfulde direktiver ud af boksen, kræves der nogle gange brugerdefinerede direktiver.

Hvordan opretter man et tilpasset direktiv?

Lad os tage et kig på et eksempel på, hvordan vi kan oprette et AngularJS-brugerdefineret direktiv.

Det brugerdefinerede direktiv i vores tilfælde vil simpelthen injicere et div-tag, som har teksten "AngularJS Tutorial" på vores side, når direktivet kaldes.

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

Kode Forklaring

Vi laver først en modul til vores vinkelapplikation. Dette er nødvendigt for at oprette et brugerdefineret direktiv, fordi direktivet vil blive oprettet ved hjælp af dette modul.
Vi er nu ved at skabe et brugerdefineret direktiv kaldet "ngGuru" og definerer en funktion, som vil have brugerdefineret kode til vores direktiv.Bemærk: - Bemærk, at når vi definerer direktivet, har vi defineret det som ngGuru med bogstavet 'G' som stort. Og når vi får adgang til det fra vores div-tag som et direktiv, får vi adgang til det som ng-guru. Sådan forstår angular brugerdefinerede direktiver defineret i en applikation. For det første skal navnet på det brugerdefinerede direktiv starte med bogstaverne 'ng'. For det andet skal bindestregen '-' kun nævnes, når direktivet kaldes. Og for det tredje kan det første bogstav efter bogstaverne 'ng', når direktivet defineres, være enten med små eller store bogstaver.
Vi bruger skabelonparameteren, som er en parameter defineret af Angular for brugerdefinerede direktiver. I dette definerer vi, at når som helst dette direktiv bruges, skal du blot bruge værdien af skabelonen og indsætte den i den kaldende kode.
Her gør vi nu brug af vores skræddersyede "ng-guru"-direktiv. Når vi gør dette, vil den værdi, vi definerede for vores skabelon " Angular JS Tutorial ” vil nu blive injiceret her.

Hvis koden eksekveres med succes, vil følgende output blive vist, når du kører din kode i browseren.

Output:

Ovenstående output viser tydeligt, at vores brugerdefinerede ng-guru-direktiv, som har skabelonen defineret til at vise en brugerdefineret tekst, bliver vist i browseren.

AngularJs direktiver og anvendelsesområde

Omfanget er defineret som den lim, der binder controlleren til visningen ved at administrere data mellem visningen og controlleren.

Når de opretter brugerdefinerede AngularJs-direktiver, vil de som standard have adgang til scope-objektet i den overordnede controller.

På denne måde bliver det nemt for specialdirektivet at gøre brug af de data, der videregives til hovedansvarlig.

Lad os se på et AngularJS brugerdefineret direktiv eksempel på, hvordan vi kan bruge omfanget af en forældrecontroller i vores brugerdefinerede direktiv.

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

Kode Forklaring

Vi opretter først en controller kaldet "DemoController". I dette definerer vi en variabel kaldet tutorialName og vedhæfter den til scope-objektet i én sætning - $scope.tutorialName = "AngularJS".
I vores brugerdefinerede direktiv kan vi kalde variablen "tutorialName" ved at bruge et udtryk. Denne variabel ville være tilgængelig, fordi den er defineret i controlleren "DemoController", som bliver overordnet for dette direktiv.
Vi henviser til controlleren i et div-tag, som vil fungere som vores overordnede div-tag. Bemærk, at dette skal gøres først, for at vores brugerdefinerede direktiv kan få adgang til tutorialName-variablen.
Vi vedhæfter endelig bare vores brugerdefinerede direktiv "ng-guru" til vores div-tag.

Hvis koden eksekveres med succes, vil følgende output blive vist, når du kører din kode i browseren.

Output:

Ovenstående output viser tydeligt, at vores brugerdefinerede direktiv "ng-guru" gør brug af omfangsvariablen tutorialName i den overordnede controller.

Brug af controllere med direktiver

Angular giver mulighed for at få adgang til controllerens medlemsvariabel direkte fra brugerdefinerede direktiver uden behov for omfangsobjektet.

Dette bliver til tider nødvendigt, fordi du i en applikation kan have flere scope-objekter, der tilhører flere controllere.

Så der er en stor chance for, at du kan begå den fejl at få adgang til scope-objektet for den forkerte controller.

I sådanne scenarier er der en måde at specifikt nævne at sige "Jeg vil have adgang til denne specifikke controller" fra mit direktiv.

Lad os tage et kig på et eksempel på, hvordan vi kan opnå dette.

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

Kode Forklaring

Vi opretter først en controller kaldet "DemoController". I dette vil vi definere en variabel kaldet "tutorialName", og denne gang i stedet for at vedhæfte den til scope-objektet, vil vi vedhæfte den direkte til controlleren.
I vores brugerdefinerede direktiv nævner vi specifikt, at vi ønsker at bruge controlleren "DemoController" ved at bruge controller parameter nøgleordet.
Vi opretter en reference til controlleren ved hjælp af parameteren "controllerAs". Dette er defineret af Angular og er måden at henvise til controlleren som en reference.

Bemærk: -Det er muligt at få adgang til flere controllere i et direktiv ved at specificere respektive blokke af controlleren, controllerAs og template-sætninger.

Endelig bruger vi i vores skabelon referencen oprettet i trin 3 og bruger den medlemsvariabel, der blev knyttet direkte til controlleren i trin 1.

Hvis koden eksekveres med succes, vil følgende output blive vist, når du kører din kode i browseren.

Output:

Outputtet viser tydeligt, at det brugerdefinerede direktiv især har adgang til DemoController og medlemsvariablen tutorialName, der er knyttet til den, og viser teksten "Angular".

Sådan opretter du genbrugelige direktiver

Vi har allerede set styrken af tilpassede direktiver, men vi kan tage det til næste niveau ved at bygge vores egne genanvendelige direktiver.

Lad os f.eks. sige, at vi ønskede at injicere kode, der altid ville vise nedenstående HTML-tags på tværs af flere skærme, hvilket dybest set kun er et input til brugerens "navn" og "alder".

For at genbruge denne funktion på flere skærme uden at kode hver gang, opretter vi en hovedkontrol eller et direktiv i vinkel til at holde disse kontroller ("navn" og "alder" på brugeren).

Så nu, i stedet for at indtaste den samme kode for nedenstående skærm hver gang, kan vi faktisk indlejre denne kode i et direktiv og indlejre det direktiv på ethvert tidspunkt.

Lad os se et eksempel på, hvordan vi kan opnå dette.

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

Kode Forklaring

I vores kodestykke til et brugerdefineret direktiv er det, der ændres, blot den værdi, som er givet til skabelonparameteren i vores brugerdefinerede direktiv. I stedet for et plan fem-tag eller en tekst, indtaster vi faktisk hele fragmentet af 2 inputkontroller for " Navn" og "alder", som skal vises på vores side.

Hvis koden eksekveres med succes, vil følgende output blive vist, når du kører din kode i browseren.

Output:

Fra ovenstående output kan vi se, at kodestykket fra skabelonen til det brugerdefinerede direktiv bliver tilføjet til siden.

AngularJS-direktiver og komponenter – ng-transclude

Som vi nævnte ret tidligere, er Angular beregnet til at udvide funktionaliteten af HTML. Og vi har allerede set, hvordan vi kan få kodeinjektion ved at bruge brugerdefinerede genanvendelige direktiver.

Men i den moderne webapplikationsudvikling er der også et koncept med at udvikle webkomponenter. Hvilket i bund og grund betyder at skabe vores egne HTML-tags, der kan bruges som komponenter i vores kode.

Derfor giver angular endnu et niveau af kraft til at udvide HTML-tags ved at give mulighed for at injicere attributter i selve HTML-tags.

Dette gøres af "ng-transkludere” tag, som er en slags indstilling til at fortælle angular for at fange alt, hvad der er sat inde i direktivet i opmærkningen.

Lad os tage et eksempel på, hvordan vi kan opnå dette.

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

Kode Forklaring

Vi bruger direktivet til at definere et brugerdefineret HTML-tag kaldet 'rude' og tilføjer en funktion, som vil sætte noget tilpasset kode til dette tag. I outputtet vil vores brugerdefinerede rude-tag vise teksten "AngularJS" i et rektangel med en solid sort kant.
Attributten "transclude" skal nævnes som sand, hvilket kræves af angular for at indsprøjte dette tag i vores DOM.
I omfanget definerer vi en title-attribut. Attributter er normalt defineret som navn/værdi-par som: navn=”værdi”. I vores tilfælde er navnet på attributten i vores rude HTML-tag "title". "@" symbolet er kravet fra vinkel. Dette gøres, så når linjen title={{title}} udføres i trin 5, bliver den tilpassede kode for title-attributten tilføjet til rudens HTML-tag.
Den brugerdefinerede kode for titelattributterne, som blot trækker en solid sort kant til vores kontrol.
Endelig kalder vi vores tilpassede HTML-tag sammen med title-attributten, som blev defineret.

Hvis koden eksekveres med succes, vil følgende output blive vist, når du kører din kode i browseren.

Output:

Outputtet viser tydeligt, at title-attributten for rudens html5-tag er blevet indstillet til den brugerdefinerede værdi "Angular.JS".

Indlejrede direktiver

Direktiver i AngularJS kan indlejres. Som bare indre moduler eller funktioner i evt programmeringssprog, skal du muligvis integrere direktiver i hinanden.

Du kan få en bedre forståelse af dette ved at se nedenstående eksempel.

I dette eksempel opretter vi 2 direktiver kaldet "ydre" og "indre".

Det indre direktiv viser en tekst kaldet "Indre".
Mens det ydre direktiv faktisk kalder til det indre direktiv for at vise teksten kaldet "Indre".

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

Kode Forklaring

Vi skaber et direktiv kaldet "ydre", som vil opføre sig som vores overordnede direktiv. Dette direktiv vil derefter kalde til det "indre" direktiv.
Begrænsningen: 'E' er påkrævet ved vinkel for at sikre, at dataene fra det indre direktiv er tilgængelige for det ydre direktiv. Bogstavet 'E' er den korte form af ordet 'Element'.
Her laver vi det indre direktiv, som viser teksten "Indre" i et div-tag.
I skabelonen for det ydre direktiv (trin #4) kalder vi det indre direktiv. Så herovre sprøjter vi skabelonen ind fra det indre direktiv til det ydre direktiv.
Endelig opfordrer vi direkte til det ydre direktiv.

Hvis koden eksekveres med succes, vil følgende output blive vist, når du kører din kode i browseren.

Output:

Fra udgangen,

Det kan ses, at både de ydre og indre direktiver er blevet kaldt, og teksten i begge div-tags vises.

Håndtering af hændelser i et direktiv

Events sådanne museklik eller knapklik kan håndteres inde fra selve direktiverne. Dette gøres ved hjælp af linkfunktionen. Linkfunktionen er det, der tillader direktivet at knytte sig til DOM-elementerne på en HTML-side.

Syntaks:

Syntaksen for linkelementet er som vist nedenfor

ng-gentag

link: function ($scope, element, attrs)

Linkfunktionen accepterer normalt 3 parametre, inklusive omfanget, det element, som direktivet er knyttet til, og målelementets attributter.

Lad os se på et eksempel på, hvordan vi kan opnå dette.

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

Kode Forklaring

Vi bruger linkfunktionen som defineret i vinkel for at give direktiverne mulighed for at få adgang til hændelser i HTML DOM.
Vi bruger nøgleordet 'element', fordi vi ønsker at reagere på en hændelse for et HTML DOM-element, som i vores tilfælde vil være "div"-elementet. Vi bruger derefter "bind"-funktionen og siger, at vi vil tilføje brugerdefineret funktionalitet til klikhændelsen for elementet. 'Klik'-ordet er nøgleordet, som bruges til at angive klikhændelsen for enhver HTML-kontrol. For eksempel har HTML-knapkontrollen klikhændelsen. Da vi i vores eksempel ønsker at tilføje en tilpasset kode til klikhændelsen i vores "dev"-tag, bruger vi nøgleordet 'klik'.
Her siger vi, at vi ønsker at erstatte elementets indre HTML (i vores tilfælde div-elementet) med teksten 'Du har klikket på mig!'.
Her definerer vi vores div-tag til at bruge ng-guru brugerdefinerede direktiv.

Hvis koden eksekveres med succes, vil følgende output blive vist, når du kører din kode i browseren.

Output:

Til at begynde med vil teksten 'Klik mig' blive vist til brugeren, fordi det er det, der oprindeligt er blevet defineret i div-tagget. Når du rent faktisk klikker på div-tagget, vil nedenstående output blive vist

Resumé

Man kan også oprette et brugerdefineret direktiv, som kan bruges til at injicere kode i hovedvinkelapplikationen.
Brugerdefinerede direktiver kan laves til at kalde medlemmer defineret i scope-objektet i en bestemt controller ved at bruge nøgleordene 'Controller', 'controllerAs' og 'template'.
Direktiver kan også indlejres for at give indlejret funktionalitet, som kan være påkrævet afhængigt af applikationens behov.
Direktiver kan også gøres genbrugelige, så de kan bruges til at injicere fælles kode, som kunne være påkrævet på tværs af forskellige webapplikationer.
Direktiver kan også bruges til at oprette brugerdefinerede HTML-tags, som vil have deres egen funktionalitet defineret i henhold til forretningskravet.
Hændelser kan også håndteres inde fra direktiver for at håndtere DOM-hændelser såsom knap- og museklik.

Hvad er brugerdefineret direktiv?

Hvordan opretter man et tilpasset direktiv?

Kode Forklaring

AngularJs direktiver og anvendelsesområde

Kode Forklaring

RELATEREDE ARTIKLER

Brug af controllere med direktiver

Kode Forklaring

Sådan opretter du genbrugelige direktiver

Kode Forklaring

AngularJS-direktiver og komponenter – ng-transclude

Kode Forklaring

Indlejrede direktiver

Kode Forklaring

Håndtering af hændelser i et direktiv

Kode Forklaring

Resumé

Tilmeld dig nyhedsbrevet