Hva er tilpasset direktiv?
Et tilpasset direktiv i Angular Js er et brukerdefinert direktiv med ønsket funksjonalitet. Selv om AngularJS har mange kraftige direktiver ut av esken, kreves det noen gang tilpassede direktiver.
I denne veiledningen vil du lære-
- Hvordan lage et tilpasset direktiv?
- AngularJs direktiver og omfang
- Bruke kontrollere med direktiver
- Hvordan lage gjenbrukbare direktiver
- AngularJS-direktiver og komponenter - ng-transclude
- Nestede direktiver
- Håndtering av hendelser i et direktiv
Hvordan lage et tilpasset direktiv?
La oss se på et eksempel på hvordan vi kan lage et tilpasset direktiv.
Det tilpassede direktivet i vårt tilfelle vil ganske enkelt injisere en div-tag som har teksten "AngularJS Tutorial" på siden vår når direktivet heter.
Event Registration Guru99 Global Event
Kode Forklaring:
- Vi lager først en modul for vinkelapplikasjonen. Dette kreves for å lage et tilpasset direktiv fordi direktivet vil bli opprettet ved hjelp av denne modulen.
- Vi lager nå et tilpasset direktiv kalt "ngGuru" og definerer en funksjon som vil ha tilpasset kode for vårt direktiv.
Merk:-
Merk at når vi definerer direktivet, har vi definert det som ngGuru med bokstaven 'G' som hovedstad. Og når vi får tilgang til den fra div-koden vår som et direktiv, får vi tilgang til den som ng-guru. Slik forstår angular tilpassede direktiver definert i en applikasjon. For det første skal navnet på det tilpassede direktivet begynne med bokstavene 'ng'. For det andre skal bindestreksymbolet '-' bare nevnes når man kaller direktivet. Og for det tredje kan den første bokstaven som følger bokstavene 'ng' når den definerer direktivet, være enten liten eller stor.
- Vi bruker malparameteren som er en parameter definert av Angular for tilpassede direktiver. I dette definerer vi at når dette direktivet brukes, så er det bare å bruke verdien på malen og injisere den i ringekoden.
- Her bruker vi nå vårt skreddersydde "ng-guru" -direktiv. Når vi gjør dette, vil verdien vi definerte for malen vår Angular JS Tutorial"nå bli injisert her.
Hvis koden er utført vellykket, vil følgende utdata vises når du kjører koden din i nettleseren.
Produksjon:
- Ovennevnte utdata viser tydelig at vårt tilpassede ng-guru-direktiv, som har malen definert for å vise en tilpasset tekst, vises i nettleseren.
AngularJs direktiver og omfang
Omfanget er definert som limet som binder kontrolleren til visningen ved å administrere dataene mellom visningen og kontrolleren.
Når du oppretter tilpassede AngularJs-direktiver, vil de som standard ha tilgang til omfangsobjektet i den overordnede kontrolleren.
På denne måten blir det enkelt for det tilpassede direktivet å benytte seg av dataene som overføres til hovedkontrolleren.
La oss se på et eksempel på hvordan vi kan bruke omfanget av en foreldrekontroller i vårt tilpassede direktiv.
Event Registration Guru99 Global Event
Kode Forklaring:
- Vi oppretter først en kontroller kalt "DemoController". I dette definerer vi en variabel kalt tutorialName og fester den til scope-objektet i en setning - $ scope.tutorialName = "AngularJS".
- I vårt tilpassede direktiv kan vi kalle variabelen "tutorialName" ved å bruke et uttrykk. Denne variabelen vil være tilgjengelig fordi den er definert i kontrolleren "DemoController", som vil bli foreldre for dette direktivet.
- Vi refererer til kontrolleren i en div-tag, som vil fungere som vår overordnede div-tag. Merk at dette må gjøres først for at vårt tilpassede direktiv skal få tilgang til tutorialName-variabelen.
- Vi legger til slutt bare vårt tilpassede direktiv "ng-guru" til div-taggen vår.
Hvis koden er utført vellykket, vil følgende utdata vises når du kjører koden din i nettleseren.
Produksjon:
- Ovennevnte utgang viser tydelig at vårt tilpassede direktiv "ng-guru" bruker omfanget variabel tutorialName i foreldrekontrolleren.
Bruke kontrollere med direktiver
Angular gir muligheten til å få tilgang til kontrollerens medlemsvariabel direkte fra tilpassede direktiver uten behov for omfangsobjektet.
Dette blir til tider nødvendig fordi du i et program kan ha objekter med flere omfang som tilhører flere kontrollere.
Så det er stor sjanse for at du kan gjøre feil ved å få tilgang til omfangsobjektet til feil kontroller.
I slike scenarier er det en måte å spesifikt nevne å si "Jeg vil ha tilgang til denne spesifikke kontrolleren" fra mitt direktiv.
La oss se på et eksempel på hvordan vi kan oppnå dette.
Event Registration Guru99 Global Event
Kode Forklaring:
- Vi oppretter først en kontroller kalt "DemoController". I dette vil vi definere en variabel kalt "tutorialName", og denne gangen i stedet for å feste den til omfangsobjektet, vil vi feste den direkte til kontrolleren.
- I vårt tilpassede direktiv nevner vi spesielt at vi ønsker å bruke kontrolleren "DemoController" ved å bruke kontrollerparameterens nøkkelord.
- Vi oppretter en referanse til kontrolleren ved hjelp av parameteren "controllerAs". Dette er definert av Angular og er måten å referere kontrolleren til som en referanse.
Merk: - Det er mulig å få tilgang til flere kontrollere i et direktiv ved å spesifisere respektive blokker for kontrolleren, controllerAs og maluttalelser.
- Til slutt, i malen vår, bruker vi referansen opprettet i trinn 3 og bruker medlemsvariabelen som ble festet direkte til kontrolleren i trinn 1.
Hvis koden er utført vellykket, vil følgende utdata vises når du kjører koden din i nettleseren.
Produksjon:
Utgangen viser tydelig at det tilpassede direktivet spesielt har tilgang til DemoController og medlemsvariabelen tutorialName som er knyttet til den, og viser teksten "Angular".
Hvordan lage gjenbrukbare direktiver
Vi så allerede kraften til tilpassede direktiver, men vi kan ta det til neste nivå ved å bygge våre egne gjenbrukbare direktiver.
La oss for eksempel si at vi ønsket å injisere kode som alltid ville vise HTML-kodene nedenfor på flere skjermer, som i utgangspunktet bare er et input for "Navn" og "alder" til brukeren.
For å gjenbruke denne funksjonen på flere skjermer uten å kode hver gang, lager vi en hovedkontroll eller et direktiv i vinkel for å holde disse kontrollene ("Navn" og "alder" til brukeren).
Så nå, i stedet for å angi den samme koden for skjermen nedenfor hver gang, kan vi faktisk legge denne koden inn i et direktiv og legge det direktivet når som helst.
La oss se et eksempel på hvordan vi kan oppnå dette.
Event Registration Guru99 Global Event
Kode Forklaring:
- I kodebiten vår for et tilpasset direktiv, er hva som endres bare verdien som blir gitt til malparameteren til vårt tilpassede direktiv.
I stedet for en plan fem-tagg eller tekst, skriver vi faktisk inn hele fragmentet med to inngangskontroller for "Navn" og "alder" som må vises på siden vår.
Hvis koden er utført vellykket, vil følgende utdata vises når du kjører koden din i nettleseren.
Produksjon:
Fra ovenstående utgang kan vi se at kodebiten fra malen til det tilpassede direktivet blir lagt til på siden.
AngularJS-direktiver og komponenter - ng-transclude
Som vi nevnte ganske tidligere, er Angular ment å utvide funksjonaliteten til HTML. Og vi har allerede sett hvordan vi kan få kodeinjeksjon ved å bruke tilpassede gjenbrukbare direktiver.
Men i den moderne utviklingen av webapplikasjoner er det også et konsept med å utvikle webkomponenter. Som i utgangspunktet betyr å lage våre egne HTML-koder som kan brukes som komponenter i koden vår.
Derfor gir vinkel et annet kraftnivå for å utvide HTML-koder ved å gi muligheten til å injisere attributter i selve HTML-kodene.
Dette gjøres av " ng-transclude " -koden, som er en slags innstilling for å fortelle vinkel å fange alt som er plassert inne i direktivet i markeringen.
La oss ta et eksempel på hvordan vi kan oppnå dette.
Event Registration Guru99 Global Event
Angular JS
Kode Forklaring:
- Vi bruker direktivet til å definere en egendefinert HTML-tag kalt 'rute' og legger til en funksjon som vil legge til noen tilpasset kode for denne koden. I utskriften vil vår tilpassede rutemerke vise teksten "AngularJS" i et rektangel med en solid svart kant.
- "Transclude" -attributtet må nevnes som sant, noe som kreves av vinkel for å injisere denne koden i vår DOM.
- I omfanget definerer vi et tittelattributt. Attributter defineres normalt som navn / verdipar som: name = "value". I vårt tilfelle er navnet på attributtet i HTML-ruten vår "tittel". "@" -Symbolet er kravet fra vinkel. Dette gjøres slik at når linjetittelen = {{title}} kjøres i trinn 5, blir den tilpassede koden for tittelattributtet lagt til i ruten HTML-tag.
- Den egendefinerte koden for tittelattributtene som bare tegner en helt svart kant for vår kontroll.
- Til slutt kaller vi vår tilpassede HTML-tag sammen med tittelattributtet som ble definert.
Hvis koden er utført vellykket, vil følgende utdata vises når du kjører koden din i nettleseren.
Produksjon:
- Utgangen viser tydelig at tittelattributtet til ruten html5-taggen er satt til den tilpassede verdien til "Angular.JS".
Nestede direktiver
Direktiver i kantete kan hekkes. Som bare indre moduler eller funksjoner i hvilket som helst programmeringsspråk, kan det hende du må legge inn direktiver i hverandre.
Du kan få en bedre forståelse av dette ved å se eksemplet nedenfor.
I dette eksemplet lager vi to direktiver kalt "ytre" og "indre".
- Det indre direktivet viser en tekst som heter "indre".
- Mens det ytre direktivet faktisk ringer til det indre direktivet om å vise teksten kalt "Indre".
Guru99 Global Event