Hvad er brugerdefineret direktiv?
Et brugerdefineret direktiv i Angular Js er et brugerdefineret direktiv med din ønskede funktionalitet. Selvom AngularJS har mange kraftfulde direktiver ud af kassen, kræves der engang tilpassede direktiver.
I denne vejledning lærer du-
- Hvordan oprettes et brugerdefineret direktiv?
- AngularJs direktiver og anvendelsesområder
- Brug af controllere med direktiver
- Sådan oprettes genanvendelige direktiver
- AngularJS-direktiver og komponenter - ng-transclude
- Indlejrede direktiver
- Håndtering af begivenheder i et direktiv
Hvordan oprettes et brugerdefineret direktiv?
Lad os se på et eksempel på, hvordan vi kan oprette et brugerdefineret direktiv.
Det brugerdefinerede direktiv i vores tilfælde vil simpelthen indsprøjte et div-tag, der har teksten "AngularJS Tutorial" på vores side, når direktivet kaldes.
Event Registration Guru99 Global Event
Kode Forklaring:
- Vi opretter først et modul til vores kantede anvendelse. Dette er nødvendigt for at oprette et brugerdefineret direktiv, fordi direktivet oprettes ved hjælp af dette modul.
- Vi opretter nu et brugerdefineret direktiv kaldet "ngGuru" og definerer en funktion, der 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 hovedstad. 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 vinkler brugerdefinerede direktiver, der er defineret i en applikation. For det første skal navnet på det brugerdefinerede direktiv begynde med bogstaverne 'ng'. For det andet skal bindestregsymbolet '-' kun nævnes, når man kalder på direktivet. Og for det tredje kan det første bogstav, der følger efter bogstaverne 'ng', når man definerer direktivet, være enten lille eller stor.
- Vi bruger skabelonparameteren, som en parameter defineret af Angular til brugerdefinerede direktiver. I dette definerer vi, at når dette direktiv bruges, skal du bare bruge værdien af skabelonen og indsprøjte den i opkaldskoden.
- Her bruger vi nu vores specialfremstillede "ng-guru" -direktiv. Når vi gør dette, indsprøjtes nu den værdi, vi definerede for vores skabelon "Angular JS Tutorial".
Hvis koden udføres med succes, vises følgende output, når du kører din kode i browseren.
Produktion:
- Ovenstående output viser tydeligt, at vores brugerdefinerede ng-guru-direktiv, som har skabelonen defineret til visning af en brugerdefineret tekst, vises i browseren.
AngularJs direktiver og anvendelsesområder
Omfanget er defineret som limen, der binder controlleren til udsigten ved at styre dataene mellem visningen og controlleren.
Når du opretter tilpassede AngularJs-direktiver, har de som standard adgang til scope-objektet i den overordnede controller.
På denne måde bliver det let for brugerdefineret direktiv at gøre brug af de data, der overføres til hovedcontrolleren.
Lad os se på et eksempel på, hvordan vi kan bruge omfanget af en overordnet controller i vores brugerdefinerede direktiv.
Event Registration Guru99 Global Event
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 en sætning - $ scope.tutorialName = "AngularJS".
- I vores brugerdefinerede direktiv kan vi kalde variablen "tutorialName" ved hjælp af et udtryk. Denne variabel ville være tilgængelig, fordi den er defineret i controlleren "DemoController", som bliver overordnet til dette direktiv.
- Vi henviser til controlleren i et div-tag, der fungerer som vores overordnede div-tag. Bemærk, at dette skal gøres først for at vores brugerdefinerede direktiv skal få adgang til variablen tutorialName.
- Endelig knytter vi bare vores brugerdefinerede direktiv "ng-guru" til vores div-tag.
Hvis koden udføres med succes, vises følgende output, når du kører din kode i browseren.
Produktion:
- Ovenstående output viser tydeligt, at vores brugerdefinerede direktiv "ng-guru" bruger omfanget variabel 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 scope-objektet.
Dette bliver nødvendigt til tider, fordi du i en applikation kan have objekter med flere anvendelsesområder, der tilhører flere controllere.
Så der er stor chance for, at du kan begå en fejl ved at få adgang til omfanget af 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 se på et eksempel på, hvordan vi kan opnå dette.
Event Registration Guru99 Global Event
Kode Forklaring:
- Vi opretter først en controller kaldet "DemoController". I dette definerer vi 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 vil bruge controlleren "DemoController" ved hjælp af controller-parameterens nøgleord.
- Vi opretter en henvisning til controlleren ved hjælp af parameteren "controllerAs". Dette er defineret af Angular og er vejen til 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 controller, controllerAs og skabelonerklæringer.
- Endelig i vores skabelon bruger vi den reference, der blev oprettet i trin 3, og bruger medlemsvariablen, der blev knyttet direkte til controlleren i trin 1.
Hvis koden udføres med succes, vises følgende output, når du kører din kode i browseren.
Produktion:
Outputtet viser tydeligt, at det brugerdefinerede direktiv især har adgang til DemoController og medlemsvariablen tutorialName, der er knyttet til det, og viser teksten "Angular".
Sådan oprettes genanvendelige direktiver
Vi har allerede set kraften i brugerdefinerede direktiver, men vi kan tage det til det næste niveau ved at opbygge vores egne genanvendelige direktiver.
Lad os f.eks. Sige, at vi ønskede at indsprøjte kode, der altid ville vise nedenstående HTML-tags på tværs af flere skærme, hvilket stort set kun er et input til "Navn" og "alder" for brugeren.
For at genbruge denne funktion på flere skærme uden kodning hver gang opretter vi en hovedkontrol eller et direktiv i vinkel for at holde disse kontroller ("Navn" og "alder" for brugeren).
Så nu, i stedet for at indtaste den samme kode til nedenstående skærm hver gang, kan vi faktisk integrere denne kode i et direktiv og integrere dette direktiv på ethvert tidspunkt.
Lad os se et eksempel på, hvordan vi kan opnå dette.
Event Registration Guru99 Global Event
Kode Forklaring:
- I vores kodestykke til et brugerdefineret direktiv er de ændringer, der kun gives til skabelonparameteren i vores tilpassede direktiv, hvad der ændres.
I stedet for et plan fem-mærke eller en tekst, indtaster vi faktisk hele fragmentet af 2 inputkontroller til "Navn" og "alder", som skal vises på vores side.
Hvis koden udføres med succes, vises følgende output, når du kører din kode i browseren.
Produktion:
Fra ovenstående output kan vi se, at kodestykket fra skabelonen til det brugerdefinerede direktiv føjes til siden.
AngularJS-direktiver og komponenter - ng-transclude
Som vi nævnte ganske tidligere, er Angular beregnet til at udvide funktionaliteten af HTML. Og vi har allerede set, hvordan vi kan få kodeindsprøjtning ved hjælp af brugerdefinerede genanvendelige direktiver.
Men i den moderne udvikling af webapplikationer er der også et koncept om at udvikle webkomponenter. Hvilket dybest set betyder at oprette vores egne HTML-tags, der kan bruges som komponenter i vores kode.
Derfor giver vinkel et andet niveau af styrke til at udvide HTML-tags ved at give mulighed for at indsprøjte attributter i selve HTML-tags.
Dette gøres med tagget " ng-transclude ", som er en slags indstilling for at fortælle vinkel at fange alt, hvad der er placeret inde i direktivet i markeringen.
Lad os tage et eksempel på, hvordan vi kan opnå dette.
Event Registration Guru99 Global Event
Angular JS
Kode Forklaring:
- Vi bruger direktivet til at definere et brugerdefineret HTML-tag kaldet 'rude' og tilføjer en funktion, der vil sætte en brugerdefineret kode til dette tag. I udgangen vil vores brugerdefinerede rude-tag vise teksten "AngularJS" i et rektangel med en sort sort kant.
- Attributten "transclude" skal nævnes som sand, hvilket kræves af vinkel for at injicere dette mærke i vores DOM.
- I omfanget definerer vi en titelattribut. Attributter defineres normalt som navn / værdipar som: navn = "værdi". I vores tilfælde er attributnavnet i vores rude-HTML-tag "titel". Symbolet "@" er kravet fra vinkel. Dette gøres, så når linjetitlen = {{title}} udføres i trin 5, tilføjes den tilpassede kode til titelattributten til ruden HTML-tag.
- Den brugerdefinerede kode til titelattributterne, der bare tegner en sort sort kant til vores kontrol.
- Endelig kalder vi vores brugerdefinerede HTML-tag sammen med titelattributten, som blev defineret.
Hvis koden udføres med succes, vises følgende output, når du kører din kode i browseren.
Produktion:
- Outputtet viser tydeligt, at titelattributten for ruden html5-tag er sat til den brugerdefinerede værdi af "Angular.JS".
Indlejrede direktiver
Direktiver i vinkel kan indlejres. Som bare indre moduler eller funktioner på ethvert programmeringssprog kan det være nødvendigt at 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 ringer til det indre direktiv om at vise teksten kaldet "indre".
Guru99 Global Event