Pri ustvarjanju spletnih aplikacij bo vaša aplikacija prej ali slej morala obdelovati dogodke DOM, kot so kliki miške, premiki, pritiski na tipkovnico, dogodki sprememb itd.
AngularJS lahko doda funkcionalnost, ki se lahko uporablja za obdelavo takšnih dogodkov.
Na primer, če je na strani gumb in želite ob kliku gumba nekaj obdelati, lahko uporabimo direktivo o dogodkih ng-click.
Na tem tečaju bomo podrobno preučili smernice za dogodke.
V tej vadnici boste izvedeli-
- Kaj je direktiva ng-click?
- Kaj je direktiva ng-show?
- Kaj je direktiva ng-hide?
Kaj je direktiva ng-click?
"Direktiva ng-klik" se uporablja za uporabo vedenje meri, ko element v HTML kliknili. To se običajno uporablja za gumbe, ker je to najpogostejše mesto za dodajanje dogodkov, ki se odzivajo na klike uporabnika
Poglejmo preprost primer, kako lahko izvedemo dogodek klik.
V tem primeru bomo imeli spremenljivko števca, ki se bo povečala, ko bo uporabnik kliknil gumb.
Event Registration Guru99 Global Event
The Current Count is {{count}}
Razlaga kode:
- Najprej z direktivo ng-init nastavimo vrednost števila lokalne spremenljivke na 0.
- Nato na gumb uvedemo direktivo o dogodkih ng-click. V tej direktivi pišemo kodo, da povečamo vrednost spremenljivke count za 1.
- Tu uporabniku prikazujemo vrednost spremenljivke count.
Če se koda uspešno izvede, se pri zagonu kode v brskalniku prikaže naslednji izhod.
Izhod:
Iz zgornjega izhoda
- Vidimo, da je prikazan gumb "Povečanje" in je vrednost spremenljivke štetja na začetku nič.
- Ko kliknete gumb Povečaj, se vrednost štetja ustrezno poveča, kot je prikazano na spodnji izhodni sliki.
Kaj je direktiva ng-show?
Direktiva ng-Show se uporablja za prikaz ali skrivanje določenega elementa HTML na podlagi izraza, podanega atributu ngShow. V ozadju je element prikazan ali skrit z odstranitvijo ali dodajanjem razreda .ng-hide razreda CSS v element.
V ozadju je element prikazan ali skrit z odstranitvijo ali dodajanjem razreda .ng-hide razreda CSS v element.
Oglejmo si primer, kako lahko uporabimo direktivo "ngshow event" za prikaz skritega elementa.
Event Registration Guru99 Global Event
Angular
Razlaga kode:
- Na element gumba pripišemo direktivo o dogodkih ng-click. Tu se sklicujemo na funkcijo, imenovano "ShowHide", ki je definirana v našem krmilniku - DemoController.
- Atribut ng-show pripisujemo oznaki div, ki vsebuje besedilo Angular. To je oznaka, ki jo bomo prikazali / skrili na podlagi atributa ng-show.
-
V krmilnik na objekt obsega pripišemo spremenljivko člana "IsVisible". Ta atribut bo posredovan kotnemu atributu ng-show (korak 2) za nadzor vidnosti nadzora div. Sprva to nastavimo na false, tako da bo ob prvem prikazu strani oznaka div skrita.
Opomba: - Ko je atribut ng-show nastavljen na true, bo uporabniku prikazan nadaljnji nadzor, ki je v našem primeru oznaka div. Ko je atribut ng-show nastavljen na false, bo nadzor skrit pred uporabnikom.
- Funkciji ShowHide dodajamo kodo, ki bo spremenljivko člana IsVisible postavila na true, tako da bo uporabniku lahko prikazana oznaka div.
Če se koda uspešno izvede, se pri zagonu kode v brskalniku prikaže naslednji izhod.
Izhod: 1
Iz rezultata,
- Na začetku lahko vidite, da oznaka div, ki ima besedilo "AngularJS", ni prikazana, in to zato, ker je objekt obsega isVisible sprva nastavljen na false, ki se nato posreduje direktivi ng-show oznake div.
- Ko kliknete na gumb »Pokaži AngularJS«, spremeni spremenljivko člana isVisible, da postane resnična in s tem besedilo »Angular« postane uporabniku vidno. Spodnji izhod bo prikazan uporabniku.
Na izhodu je zdaj prikazana oznaka div z besedilom Angular.
Kaj je direktiva ng-hide?
Z direktivo ng-hide bo element skrit, če je izraz TRUE. Če je izraz FALSE, bo prikazan element. V ozadju je element prikazan ali skrit z odstranitvijo ali dodajanjem razreda .ng-hide razreda CSS v element.
Po drugi strani pa je pri ng-hide element skrit, če je izraz resničen, in prikazan bo, če je napačen.
Oglejmo si podoben primer, kot je prikazan za ngShow, da predstavimo, kako lahko uporabimo atribut ngHide.
Event Registration Guru99 Global Event
Angular
Razlaga kode:
- Na element gumba pripišemo direktivo o dogodkih ng-click. Tu se sklicujemo na funkcijo, imenovano ShowHide, ki je definirana v našem krmilniku - DemoController.
- Atribut ng-hide pripišemo oznaki div, ki vsebuje besedilo Angular. To je oznaka, ki jo bomo prikazali / skrili na podlagi atributa ng-show.
- V krmilnik pripišemo spremenljivko člana isVisible objektu obsega. Ta atribut bo posredovan kotnemu atributu ng-show za nadzor vidnosti nadzora div. Sprva to nastavimo na false, tako da bo ob prvem prikazu strani oznaka div skrita.
- Funkciji ShowHide dodajamo kodo, ki bo spremenljivko člana IsVisible postavila na true, tako da bo uporabniku lahko prikazana oznaka div.
Če se koda uspešno izvede, se pri zagonu kode v brskalniku prikaže naslednji izhod.
Izhod:
Iz rezultata,
- Na začetku lahko vidite, da je oznaka div z besedilom "AngularJs" prvotno prikazana, ker je vrednost lastnosti false poslana v direktivo ng-hide.
- Ko kliknemo na gumb "Skrij kotno", se vrednost lastnosti true bo poslala v direktivo ng-hide. Zato bo prikazan spodnji izhod, v katerem bo skrita beseda "kotna".
Direktive o poslušalcih dogodkov AngularJS
Poslušalce dogodkov AngularJS lahko dodate elementom HTML z uporabo ene ali več teh direktiv:
- ng-zameglitev
- ng-sprememba
- ng-klik
- ng-copy
- rezanje ng
- ng-dblclick
- ng-fokus
- ng-tipkovnica
- pritisk tipke ng
- ng-tipkovnica
- ng-mousedown
- ng-mouseenter
- ng-mouseleave
- ng-mousemove
- ng-pomik miške
- ng-mouseup
- ng-paste
Povzetek
- Direktive o dogodkih se uporabljajo v programu Angular za dodajanje kode po meri za odziv na dogodke, ki jih ustvari uporabniško posredovanje, kot so kliki gumbov, kliki tipkovnice in miške itd.
- Najpogostejša direktiva o dogodkih je direktiva ng-click, ki se uporablja za obdelavo dogodkov klikov. Najpogostejša uporaba tega je za klike gumbov, pri čemer je mogoče dodati kodo, da se odzove na klik gumba.
- Elemente HTML je mogoče uporabniku tudi skriti ali prikazati z uporabo kotnih atributov ng-show in ng-hide.