Prilikom izrade web aplikacija, prije ili kasnije vaša će aplikacija trebati obrađivati DOM događaje poput klikova mišem, pomicanja, pritiskanja tipkovnice, promjena događaja itd.
AngularJS može dodati funkcionalnost koja se može koristiti za obradu takvih događaja.
Na primjer, ako na stranici postoji gumb i želite nešto obraditi kad se klikne na gumb, možemo koristiti direktivu o događajima ng-click.
Tijekom ovog tečaja detaljno ćemo razmotriti smjernice događaja.
U ovom vodiču naučit ćete-
- Što je ng-click direktiva?
- Što je ng-show direktiva?
- Što je ng-hide direktiva?
Što je ng-click direktiva?
„NG-klik direktiva” se koristi za primjenu prilagođenog ponašanja kada jedan element u HTML kliknuli. To se obično koristi za gumbe jer je to najčešće mjesto za dodavanje događaja koji odgovaraju na klikove koje je izvršio korisnik
Pogledajmo jednostavan primjer kako možemo implementirati događaj klika.
U ovom ćemo primjeru imati varijablu brojača koja će povećavati vrijednost kada korisnik klikne gumb.
Event Registration Guru99 Global Event
The Current Count is {{count}}
Objašnjenje koda:
- Prvo koristimo ng-init direktivu za postavljanje vrijednosti broja lokalnih varijabli na 0.
- Zatim uvodimo ng-click direktivu događaja na gumb. U ovoj direktivi pišemo kod da bismo povećali vrijednost varijable count za 1.
- Ovdje prikazujemo vrijednost varijable count korisniku.
Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete svoj kôd u pregledniku.
Izlaz:
Iz gornjeg rezultata,
- Vidimo da je prikazan gumb "Povećaj", a vrijednost varijable count u početku je nula.
- Kada kliknete na gumb Povećaj, vrijednost broja se prema tome povećava, kao što je prikazano na donjoj izlaznoj slici.
Što je ng-show direktiva?
Direktiva ng-Show koristi se za prikazivanje ili skrivanje zadanog HTML elementa na temelju izraza koji se daje atributu ngShow. U pozadini se element prikazuje ili skriva uklanjanjem ili dodavanjem CSV klase .ng-hide na element.
U pozadini se element prikazuje ili skriva uklanjanjem ili dodavanjem CSV klase .ng-hide na element.
Pogledajmo primjer kako možemo koristiti direktivu "ngshow event" za prikaz skrivenog elementa.
Event Registration Guru99 Global Event
Angular
Objašnjenje koda:
- Direktivi događaja ng-click prilažemo elementu gumba. Ovdje se pozivamo na funkciju nazvanu "ShowHide" koja je definirana u našem upravljaču - DemoController.
- Atribut ng-show pridružujemo div oznaci koja sadrži tekst Angular. Ovo je oznaka koju ćemo prikazati / sakriti na temelju atributa ng-show.
-
U kontroler dodajemo varijablu člana "IsVisible" na objekt opsega. Ovaj će se atribut proslijediti kutnom atributu ng-show (korak # 2) za kontrolu vidljivosti div kontrole. U početku postavljamo ovo na false, tako da će se pri prvom prikazivanju stranice div oznaka sakriti.
Napomena: - Kada je atribut ng-show postavljen na true, sljedeća kontrola koja je u našem slučaju div oznaka bit će prikazana korisniku. Kad je atribut ng-show postavljen na false, kontrola će biti skrivena od korisnika.
- Dodajemo kôd funkciji ShowHide koja će postaviti varijablu člana IsVisible na true kako bi se div oznaka mogla prikazati korisniku.
Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete svoj kôd u pregledniku.
Izlaz: 1
Iz rezultata,
- U početku možete vidjeti da se div oznaka koja ima tekst "AngularJS" ne prikazuje, a to je zato što je objekt opsega isVisible u početku postavljen na false, a zatim se prosljeđuje ng-show direktivi div oznake.
- Kada kliknete na gumb "Prikaži AngularJS", to mijenja varijablu člana isVisible da postane istinita i stoga tekst "Angular" postaje vidljiv korisniku. Izlaz u nastavku bit će prikazan korisniku.
Izlaz sada prikazuje div oznaku s kutnim tekstom.
Što je ng-hide direktiva?
S ng-hide direktivom element će biti skriven ako je izraz TRUE. Ako je Izraz FALSE, element će biti prikazan. U pozadini se element prikazuje ili skriva uklanjanjem ili dodavanjem CSV klase .ng-hide na element.
S druge strane, s ng-hide, element je skriven ako je izraz istinit, a prikazat će se ako je netačan.
Pogledajmo sličan primjer kao onaj prikazan za ngShow kako bismo prikazali kako se atribut ngHide može koristiti.
Event Registration Guru99 Global Event
Angular
Objašnjenje koda:
- Direktivi događaja ng-click prilažemo elementu gumba. Ovdje se pozivamo na funkciju ShowHide koja je definirana u našem kontroleru - DemoController.
- Atribut ng-hide pridružujemo div oznaci koja sadrži tekst Angular. Ovo je oznaka koju ćemo prikazati / sakriti na temelju atributa ng-show.
- U kontroler dodajemo varijablu člana isVisible na objekt opsega. Ovaj će se atribut proslijediti kutnom atributu ng-show za kontrolu vidljivosti div kontrole. U početku postavljamo ovo na false, tako da će se pri prvom prikazivanju stranice div oznaka sakriti.
- Dodajemo kôd funkciji ShowHide koja će postaviti varijablu člana IsVisible na true kako bi se div oznaka mogla prikazati korisniku.
Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete svoj kôd u pregledniku.
Izlaz:
Iz rezultata,
- U početku možete vidjeti da se div oznaka koja ima tekst "AngularJs" u početku prikazuje jer je vrijednost svojstva false poslana u direktivu ng-hide.
- Kada kliknemo na gumb "Sakrij kutni", vrijednost svojstva true will poslana je u direktivu ng-hide. Stoga će biti prikazan donji izlaz u kojem će biti skrivena riječ "Kutni".
Smjernice za slušatelje događaja AngularJS
Slušatelje događaja AngularJS možete dodati svojim HTML elementima pomoću jedne ili više ovih direktiva:
- ng-zamagljivanje
- ng-promjena
- ng-klikni
- ng-kopija
- rezanje ng
- ng-dblclick
- ng-fokus
- ng-tipkovnica
- pritiskom tipke ng
- ng-tipkovnica
- ng-mousedown
- ng-mouseenter
- ng-mouseleave
- ng-mousemove
- ng-prelazak mišem
- ng-mišup
- ng-paste
Sažetak
- Direktive o događajima koriste se u Angulu za dodavanje prilagođenog koda za odgovaranje na događaje generirane korisničkom intervencijom, poput klikova na tipke, klikova na tipkovnici i mišu itd.
- Najčešća direktiva događaja je ng-click direktiva koja se koristi za rukovanje događajima klika. Najčešća je upotreba za klikove na gumb pri čemu se kôd može dodati kao odgovor na klik na gumb.
- HTML elementi se također mogu sakriti ili prikazati korisniku u skladu s tim pomoću kutnih atributa ng-show i ng-hide.