Kun luot verkkopohjaisia sovelluksia, sovelluksesi on ennemmin tai myöhemmin käsiteltävä DOM-tapahtumia, kuten hiiren napsautuksia, siirtoja, näppäimistön painalluksia, tapahtumien muuttamista jne.
AngularJS voi lisätä toimintoja, joita voidaan käyttää tällaisten tapahtumien käsittelemiseen.
Esimerkiksi, jos sivulla on painike ja haluat käsitellä jotain, kun painiketta napsautetaan, voimme käyttää ng-click-tapahtumadirektiiviä.
Tutkimme tapahtumadirektiivit yksityiskohtaisesti tämän kurssin aikana.
Tässä opetusohjelmassa opit-
- Mikä on ng-click-direktiivi?
- Mikä on ng-show-direktiivi?
- Mikä on ng-hide-direktiivi?
Mikä on ng-click-direktiivi?
"Ng-click direktiivi" käytetään soveltamaan mukautettuja käytöksestä Kun elementti HTML napsautetaan. Tätä käytetään yleensä painikkeisiin, koska se on yleisin paikka lisätä tapahtumia, jotka reagoivat käyttäjän tekemiin napsautuksiin
Katsotaanpa yksinkertainen esimerkki siitä, miten voimme toteuttaa napsautustapahtuman.
Tässä esimerkissä meillä on laskurimuuttuja, jonka arvo kasvaa, kun käyttäjä napsauttaa painiketta.
Event Registration Guru99 Global Event
The Current Count is {{count}}
Koodin selitys:
- Asetamme ensin ng-init-käskyn paikallisen muuttujan määrän arvoksi 0.
- Esittelemme sitten ng-click-tapahtumadirektiivin painikkeeseen. Tässä direktiivissä kirjoitamme koodia lisätäksesi muuttujan arvoa yhdellä.
- Tässä näytetään laskentamuuttujan arvo käyttäjälle.
Jos koodi suoritetaan onnistuneesti, seuraava tulos näkyy, kun suoritat koodin selaimessa.
Tuotos:
Yllä olevasta tuotoksesta
- Voimme nähdä, että painike "Increment" näkyy ja laskemuuttujan arvo on aluksi nolla.
- Kun napsautat Lisäys-painiketta, laskenta-arvoa lisätään vastaavasti, kuten alla olevassa tulostuskuvassa näkyy.
Mikä on ng-show-direktiivi?
ng-Show- käskyä käytetään tietyn HTML-elementin näyttämiseen tai piilottamiseen ngShow-määritteelle annetun lausekkeen perusteella. Taustalla elementti näytetään tai piilotetaan poistamalla tai lisäämällä .ng-hide CSS -luokka elementille.
Taustalla elementti näytetään tai piilotetaan poistamalla tai lisäämällä .ng-hide CSS -luokka elementille.
Katsotaanpa esimerkkiä siitä, miten voimme käyttää "ngshow event" -direktiiviä piilotetun elementin näyttämiseen.
Event Registration Guru99 Global Event
Angular
Koodin selitys:
- Liitämme ng-click-tapahtumadirektiivin painike-elementtiin. Tässä viitataan toimintoon nimeltä "ShowHide", joka on määritelty ohjaimessamme - DemoController.
- Liitämme ng-show-attribuutin div-tagiin, joka sisältää tekstin Angular. Tämä on tunniste, jonka aiomme näyttää / piilottaa ng-show-attribuutin perusteella.
-
Ohjaimessa liitämme "IsVisible" -muuttujan laajuusobjektiin. Tämä attribuutti välitetään ng-show-kulmamääritteelle (vaihe # 2) div-ohjaimen näkyvyyden hallitsemiseksi. Aluksi asetamme tämän vääräksi, jotta sivun ensimmäisen näyttämisen jälkeen div-tunniste piilotetaan.
Huomaa: - Kun määritteet ng-show on asetettu tosi-arvoksi, seuraava ohjausobjekti, joka on tapauksessamme div-tag, näytetään käyttäjälle. Kun ng-show-määritteeksi on asetettu epätosi, ohjaus piilotetaan käyttäjältä.
- Lisäämme koodia ShowHide-toimintoon, joka asettaa IsVisible-jäsenmuuttujan tosi-arvoksi, jotta div-tag voidaan näyttää käyttäjälle.
Jos koodi suoritetaan onnistuneesti, seuraava tulos näkyy, kun suoritat koodin selaimessa.
Lähtö: 1
Lähdöstä
- Aluksi voit nähdä, että div-tagia, jolla on teksti "AngularJS", ei näytetä, ja tämä johtuu siitä, että isVisible scope -objekti asetetaan aluksi vääräksi, joka sitten siirretään div-tagin ng-show-direktiiville.
- Kun napsautat "Näytä kulmaJS" -painiketta, se muuttaa isVisible-jäsenmuuttujan totta ja siten teksti "Kulma" tulee käyttäjän näkyviin. Alla oleva lähtö näytetään käyttäjälle.
Lähdössä näkyy nyt div-tagi, jossa on kulmateksti.
Mikä on ng-hide-direktiivi?
Kun ng piilota direktiivi elementti on piilotettu, jos lauseke on tosi. Jos lauseke on EPÄTOSI, elementti näytetään. Taustalla elementti näytetään tai piilotetaan poistamalla tai lisäämällä .ng-hide CSS -luokka elementille.
Toisaalta ng-hide-elementillä elementti on piilotettu, jos lauseke on tosi, ja se näytetään, jos se on väärä.
Katsotaanpa samankaltaista esimerkkiä kuin ngShow-mallissa, esittelemme kuinka ngHide-attribuuttia voidaan käyttää.
Event Registration Guru99 Global Event
Angular
Koodin selitys:
- Liitämme ng-click-tapahtumadirektiivin painike-elementtiin. Tässä viitataan toimintoon nimeltä ShowHide, joka on määritelty ohjaimessamme - DemoController.
- Liitämme ng-hide-attribuutin div-tagiin, joka sisältää tekstin Angular. Tämä on tunniste, jonka aiomme näyttää / piilottaa ng-show-attribuutin perusteella.
- Ohjaimessa liitämme isVisible-jäsenmuuttujan laajuusobjektiin. Tämä attribuutti välitetään ng-show-kulmamääritteelle div-ohjauksen näkyvyyden hallitsemiseksi. Aluksi asetamme tämän vääräksi, jotta sivun ensimmäisen näyttämisen jälkeen div-tunniste piilotetaan.
- Lisäämme koodia ShowHide-toimintoon, joka asettaa IsVisible-jäsenmuuttujan tosi-arvoksi, jotta div-tag voidaan näyttää käyttäjälle.
Jos koodi suoritetaan onnistuneesti, seuraava tulos näkyy, kun suoritat koodin selaimessa.
Tuotos:
Lähdöstä
- Aluksi voit nähdä, että div-tagi, jolla on teksti "AngularJs", näytetään alun perin, koska false-arvon ominaisuusarvo lähetetään ng-hide-direktiiviin.
- Kun napsautamme "Piilota kulma" -painiketta, todellisen arvon ominaisuusarvo lähetetään ng-hide-direktiiviin. Siksi alla oleva lähtö näytetään, jossa sana "Kulma" piilotetaan.
AngularJS-tapahtumakuunteludirektiivit
Voit lisätä AngularJS-tapahtumakuuntelijoita HTML-elementteihisi käyttämällä yhtä tai useampaa seuraavista direktiiveistä:
- ng-hämärtää
- ng-muutos
- napsauta
- ng-kopio
- ng-leikattu
- ng-dblclick
- ng-tarkennus
- ng-näppäinlataus
- ng-näppäimen painallus
- ng-näppäimet
- ng-hiirimatto
- ng-hiirikeskus
- ng-mouseleave
- ng-mousemove
- ng-hiiren osoitin
- ng-hiiri
- ng-liitä
Yhteenveto
- Tapahtumadirektiivejä käytetään kulmissa lisäämään mukautettua koodia vastaamaan käyttäjän toimenpiteiden aiheuttamiin tapahtumiin, kuten napin painalluksiin, näppäimistön ja hiiren napsautuksiin jne.
- Yleisin tapahtumadirektiivi on ng-click-direktiivi, jota käytetään napsautustapahtumien käsittelemiseen. Yleisin käyttö on napin napsautuksiin, joissa koodi voidaan lisätä vastaamaan napin napsautukseen.
- HTML-elementit voidaan myös piilottaa tai näyttää käyttäjälle vastaavasti käyttämällä ng-show- ja ng-hide-kulmamääritteitä.