Veebipõhiste rakenduste loomisel peab teie rakendus varem või hiljem hakkama saama DOM-i sündmustega nagu hiireklõpsud, käigud, klaviatuuri vajutused, sündmuste muutmine jne.
AngularJS võib lisada funktsionaalsust, mida saab kasutada selliste sündmuste käsitlemiseks.
Näiteks kui lehel on nupp ja soovite nupu klõpsamisel midagi töödelda, saame kasutada ng-click sündmuste käskkirja.
Selle kursuse käigus uurime üksikasjalikult ürituste direktiive.
Selles õpetuses saate teada
- Mis on ng-click direktiiv?
- Mis on ng-show direktiiv?
- Mis on ng-hide direktiiv?
Mis on ng-click direktiiv?
"Ng kliki direktiiv" kasutatakse kohaldada kohandatud käitumist kui element HTML klõpsatud. Seda kasutatakse tavaliselt nuppude jaoks, kuna see on kõige tavalisem koht sündmuste lisamiseks, mis reageerivad kasutaja tehtud klikkidele
Vaatame lihtsat näidet selle kohta, kuidas klõpsamise sündmust rakendada.
Selles näites on meil loendur muutuja, mille väärtus suureneb, kui kasutaja nuppu klõpsab.
Event Registration Guru99 Global Event
The Current Count is {{count}}
Koodi selgitus:
- Esmalt kasutame käsku ng-init, et määrata kohaliku muutujate väärtus väärtuseks 0.
- Seejärel tutvustame nupule ng-click sündmuste direktiivi. Selles direktiivis kirjutame koodi, et suurendada loendusmuutuja väärtust 1 võrra.
- Siin kuvame kasutajale loendusmuutuja väärtuse.
Kui kood on edukalt käivitatud, kuvatakse brauseris koodi käivitamisel järgmine väljund.
Väljund:
Ülaltoodud väljundi põhjal
- Näeme, et kuvatakse nupp "Inkrement" ja loendusmuutuja väärtus on esialgu null.
- Kui klõpsate nupul Inkrement, suurendatakse loenduse väärtust vastavalt, nagu on näidatud allpool oleval väljundpildil.
Mis on ng-show direktiiv?
ng-Show käsku kasutatakse antud HTML-elemendi kuvamiseks või peitmiseks atribuudile ngShow antud avaldise põhjal. Taustal kuvatakse või peidetakse element, eemaldades või lisades elemendile .ng-hide CSS-klassi.
Taustal kuvatakse või peidetakse element, eemaldades või lisades elemendile .ng-hide CSS-klassi.
Vaatame näidet selle kohta, kuidas saame peidetud elemendi kuvamiseks käsku "ngshow event" kasutada.
Event Registration Guru99 Global Event
Angular
Koodi selgitus:
- Manustame ng-elementi ng-click sündmuse käskkirja. Siinkohal viitame funktsioonile "ShowHide", mis on määratletud meie kontrolleris - DemoController.
- Me lisame atribuudi ng-show div-märgendile, mis sisaldab teksti Angular. See on silt, mida me näitame / peidame atribuudi ng-show alusel.
-
Kontrolleris kinnitame suleobjekti liikmemuutuja "IsVisible". See atribuut edastatakse ng-show nurga atribuudile (samm # 2), et juhtida div-juhtelemendi nähtavust. Esialgu määrame selle valeks, et lehe esmakordsel kuvamisel peidetaks div silt.
Märkus. - Kui atribuutide ng-show väärtuseks on seatud tõene, kuvatakse kasutajale järgmine juhtelement, mis meie puhul on div-silt. Kui atribuudi ng-show väärtuseks on seatud vale, peidetakse kontroll kasutaja eest.
- Lisame funktsiooni ShowHide koodi, mis seab IsVisible liikumismuutuja väärtuseks true, et div-märgendit saaks kasutajale näidata.
Kui kood on edukalt käivitatud, kuvatakse brauseris koodi käivitamisel järgmine väljund.
Väljund: 1
Väljundi põhjal
- Esialgu näete, et div-märgendit, millel on tekst "AngularJS", ei kuvata ja see on tingitud sellest, et objekti isVisible sätteks seatakse algselt vale, mis seejärel edastatakse div-ng-show direktiivile ng-show.
- Kui klõpsate nupul "Kuva nurkJS", muudab see muutuja isVisible liikme tõeks ja seega muutub tekst "Nurk" kasutajale nähtavaks. Allpool toodud väljundit kuvatakse kasutajale.
Väljund näitab nüüd div-märgendit nurgelise tekstiga.
Mis on ng-hide direktiiv?
Mis ng Peida direktiiv element peidetakse, kui avaldis on tõene. Kui avaldis on FALSE, kuvatakse element. Taustal kuvatakse või peidetakse element, eemaldades või lisades elemendile .ng-hide CSS-klassi.
Teiselt poolt ng-hide puhul on element peidetud, kui avaldis on tõene, ja seda näidatakse, kui see on vale.
Vaatame ngShow jaoks näidatud sarnast näidet, et näidata, kuidas atribuuti ngHide saab kasutada.
Event Registration Guru99 Global Event
Angular
Koodi selgitus:
- Manustame ng-elementi ng-click sündmuse käskkirja. Siinkohal viidame funktsioonile ShowHide, mis on määratletud meie kontrolleris - DemoController.
- Me lisame atribuudi ng-hide div-märgendile, mis sisaldab teksti Angular. See on silt, mida me näitame / peidame atribuudi ng-show põhjal.
- Kontrolleris kinnitame muutuja isVisible liikumisobjekti juurde. See atribuut edastatakse ng-show nurga atribuudile, et juhtida div-juhtelemendi nähtavust. Esialgu määrame selle valeks, et lehe esmakordsel kuvamisel peidetaks div silt.
- Lisame funktsiooni ShowHide koodi, mis seab IsVisible liikumismuutuja väärtuseks true, et div-märgendit saaks kasutajale näidata.
Kui kood on edukalt käivitatud, kuvatakse brauseris koodi käivitamisel järgmine väljund.
Väljund:
Väljundi põhjal
- Esialgu näete, et algselt kuvatakse div-märgend, millel on tekst "AngularJs", kuna atribuudi väärtus false väärtus saadetakse ng-hide direktiivile.
- Kui klõpsame nupul "Peida nurk", saadetakse direktiivile ng-hide tõelise väärtuse atribuudi väärtus. Seega kuvatakse allpool olev väljund, milles peidetakse sõna "nurk".
AngularJS sündmuste kuulajate direktiivid
Saate lisada HTML-elementidele AngularJS-i sündmuste kuulajad, kasutades ühte või mitut järgmistest direktiividest:
- ng-hägusus
- ng-muutus
- ng-klõps
- ng-copy
- ng-lõigatud
- ng-dblclick
- ng-fookus
- ng-keydown
- ng-klahvivajutus
- ng-klahvistik
- ng-hiirelinn
- ng-hiirekeskus
- ng-mouseleave
- ng-hiireviis
- ng-hiirekursor
- ng-mouseup
- ng-pasta
Kokkuvõte
- Sündmuste direktiive kasutatakse nurkade abil kohandatud koodi lisamiseks, et reageerida kasutaja sekkumisest tulenevatele sündmustele, näiteks nupuvajutusele, klaviatuuri ja hiire klõpsudele jne.
- Kõige tavalisem sündmusdirektiiv on ng-click direktiiv, mida kasutatakse kliki sündmuste käsitlemiseks. Selle kõige tavalisem kasutamine on nupul klõpsamine, kus nupu klõpsamisele reageerimiseks saab lisada koodi.
- HTML-elemente saab ka peita või kasutajale vastavalt näidata, kasutades nurgakujulisi atribuute ng-show ja ng-hide.