Når du oppretter nettbaserte applikasjoner, må applikasjonen før eller senere håndtere DOM-hendelser som museklikk, trekk, tastaturpresser, endre hendelser osv.
AngularJS kan legge til funksjonalitet som kan brukes til å håndtere slike hendelser.
For eksempel, hvis det er en knapp på siden og du vil behandle noe når du klikker på knappen, kan vi bruke ng-click hendelsesdirektivet.
Vi vil se nærmere på hendelsesdirektiver i løpet av dette kurset.
I denne veiledningen vil du lære-
- Hva er ng-click-direktivet?
- Hva er ng-show-direktivet?
- Hva er ng-hide-direktivet?
Hva er ng-click-direktivet?
Den "ng-klikk-direktiv" brukes til å bruke egendefinerte oppførsel til når et element i HTML klikket. Dette brukes vanligvis til knapper fordi det er det vanligste stedet for å legge til hendelser som svarer på klikk utført av brukeren
La oss se på et enkelt eksempel på hvordan vi kan implementere klikkhendelsen.
I dette eksemplet vil vi ha en motvariabel som øker i verdi når brukeren klikker på en knapp.
Event Registration Guru99 Global Event
The Current Count is {{count}}
Kode Forklaring:
- Vi bruker først ng-init-direktivet for å sette verdien til et antall lokale variabler til 0.
- Vi introduserer deretter ng-click hendelsesdirektivet til knappen. I dette direktivet skriver vi kode for å øke verdien på tellingsvariabelen med 1.
- Her viser vi verdien av tellevariabelen for brukeren.
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,
- Vi kan se at knappen "Inkrement" vises, og verdien av tellevariabelen er i utgangspunktet null.
- Når du klikker på økningsknappen, økes verdien av tellingen tilsvarende som vist i utgangsbildet nedenfor.
Hva er ng-show-direktivet?
ng-Show-direktivet brukes til å vise eller skjule et gitt HTML-element basert på uttrykket som er gitt til attributtet ngShow. I bakgrunnen vises eller skjules elementet ved å fjerne eller legge til .ng-hide CSS-klassen på elementet.
I bakgrunnen vises eller skjules elementet ved å fjerne eller legge til .ng-hide CSS-klassen på elementet.
La oss se på et eksempel på hvordan vi kan bruke "ngshow event" -direktivet til å vise et skjult element.
Event Registration Guru99 Global Event
Angular
Kode Forklaring:
- Vi legger til ng-click hendelsesdirektivet til knappelementet. Her refererer vi til en funksjon kalt "ShowHide" som er definert i kontrolleren vår - DemoController.
- Vi legger til ng-show-attributtet til en div-tag som inneholder teksten Angular. Dette er merkelappen som vi skal vise / skjule basert på attributtet ng-show.
-
I kontrolleren fester vi "IsVisible" -medlemvariabelen til omfangsobjektet. Denne attributtet vil bli sendt til vinkelattributtet ng-show (trinn 2) for å kontrollere synligheten til div-kontrollen. Vi setter innledningsvis dette til falsk, slik at når siden først vises, blir div-koden skjult.
Merk: - Når attributtene ng-show er satt til true, vil den påfølgende kontrollen som i vårt tilfelle er div-koden vises til brukeren. Når ng-show-attributtet er satt til falsk, blir kontrollen skjult for brukeren.
- Vi legger til kode i ShowHide-funksjonen som vil sette IsVisible medlemsvariabelen til sant slik at div-koden kan vises til brukeren.
Hvis koden er utført vellykket, vil følgende utdata vises når du kjører koden din i nettleseren.
Utgang: 1
Fra utgangen,
- Du kan i utgangspunktet se at div-koden som har teksten "AngularJS" ikke vises, og dette er fordi isVisible scope-objektet i utgangspunktet er satt til false, som deretter sendes til ng-show-direktivet til div-taggen.
- Når du klikker på "Vis AngularJS" -knappen, endres den isVisible medlemsvariabelen til å bli sann, og dermed blir teksten "Angular" synlig for brukeren. Resultatet nedenfor vil bli vist til brukeren.
Utgangen viser nå div-taggen med vinkleteksten.
Hva er ng-hide-direktivet?
Med ng-hide-direktivet blir et element skjult hvis uttrykket er SANT. Hvis uttrykket er FALSE vil elementet vises. I bakgrunnen vises eller skjules elementet ved å fjerne eller legge til .ng-hide CSS-klassen på elementet.
På den annen side med ng-hide, er elementet skjult hvis uttrykket er sant, og det vil vises hvis det er falskt.
La oss se på lignende eksempel som det som er vist for ngShow for å vise hvordan ngHide-attributtet kan brukes.
Event Registration Guru99 Global Event
Angular
Kode Forklaring:
- Vi legger til ng-click hendelsesdirektivet til knappelementet. Her refererer vi til en funksjon kalt ShowHide som er definert i kontrolleren vår - DemoController.
- Vi legger til ng-hide-attributtet til en div-tag som inneholder teksten Angular. Dette er merkelappen, som vi skal vise / skjule basert på attributtet ng-show.
- I kontrolleren fester vi isVisible medlemsvariabelen til omfangsobjektet. Denne attributtet vil bli overført til ng-show vinkelattributtet for å kontrollere synligheten til div-kontrollen. Vi setter innledningsvis dette til falsk, slik at når siden først vises, blir div-koden skjult.
- Vi legger til kode i ShowHide-funksjonen som vil sette IsVisible medlemsvariabelen til sant slik at div-koden kan vises til brukeren.
Hvis koden er utført vellykket, vil følgende utdata vises når du kjører koden din i nettleseren.
Produksjon:
Fra utgangen,
- Du kan i utgangspunktet se at div-koden som har teksten "AngularJs" først vises fordi eiendomsverdien for false blir sendt til ng-hide-direktivet.
- Når vi klikker på "Hide Angular" -knappen, sendes eiendomsverdien til true til ng-hide-direktivet. Derfor vil utdataene nedenfor vises, der ordet "Vinkel" blir skjult.
AngularJS direktør for hendelseslytter
Du kan legge til AngularJS-hendelseslyttere i HTML-elementene dine ved å bruke ett eller flere av disse direktivene:
- ng-uskarphet
- ng-forandring
- ng-klikk
- ng-kopi
- ng-cut
- ng-dblklikk
- ng-fokus
- ng-keydown
- ng-tastetrykk
- ng-keyup
- ng-mousedown
- ng-musesenter
- ng-mouseleave
- ng-mousemove
- ng-mouseover
- ng-mouseup
- ng-lim inn
Sammendrag
- Hendelsesdirektiver brukes i Angular for å legge til tilpasset kode for å svare på hendelser generert av brukerintervensjon, for eksempel knappeklikk, tastatur- og museklikk osv.
- Det vanligste hendelsesdirektivet er ng-click-direktivet som brukes til å håndtere klikkhendelser. Den vanligste bruken av dette er for knappeklikk der kode kan legges til for å svare på et knappeklikk.
- HTML-elementer kan også skjules eller vises til brukeren ved å bruke vinkelattributtene ng-show og ng-hide.