Kurdami žiniatinklio programas, anksčiau ar vėliau jūsų programa turės tvarkyti DOM įvykius, pvz., Pelės paspaudimus, judesius, klaviatūros paspaudimus, įvykių keitimą ir kt.
„AngularJS“ gali pridėti funkcijų, kurias galima naudoti tvarkant tokius įvykius.
Pavyzdžiui, jei puslapyje yra mygtukas ir norite ką nors apdoroti spustelėjus mygtuką, galime naudoti „ng-click“ įvykių direktyvą.
Šio kurso metu išsamiai išnagrinėsime renginių direktyvas.
Šioje pamokoje sužinosite
- Kas yra „ng-click“ direktyva?
- Kas yra „ng-show“ direktyva?
- Kas yra „ng-hide“ direktyva?
Kas yra „ng-click“ direktyva?
"NG-spustelėkite direktyva" yra naudojamas taikyti pasirinktinį elgesį, kai HTML elementas paspaudėte. Paprastai tai naudojama mygtukams, nes čia dažniausiai įtraukiami įvykiai, reaguojantys į vartotojo atliekamus paspaudimus
Pažiūrėkime paprastą pavyzdį, kaip mes galime įgyvendinti paspaudimo įvykį.
Šiame pavyzdyje turėsime skaitiklio kintamąjį, kurio vertė padidės, kai vartotojas spustelės mygtuką.
Event Registration Guru99 Global Event
The Current Count is {{count}}
Kodo paaiškinimas:
- Pirmiausia naudojame ng-init direktyvą, kad nustatytume vietinio kintamojo skaičiaus vertę į 0.
- Tada į mygtuką pristatome „ng-click“ įvykių direktyvą. Šioje direktyvoje mes rašome kodą, kad skaičiaus kintamojo vertė būtų padidinta 1.
- Čia vartotojui parodome skaičiavimo kintamojo vertę.
Jei kodas sėkmingai įvykdytas, paleidus kodą naršyklėje bus rodoma ši išvestis.
Išvestis:
Iš pirmiau pateiktos išvesties
- Matome, kad rodomas mygtukas „Prieaugis“ ir skaičiavimo kintamojo vertė iš pradžių lygi nuliui.
- Spustelėjus mygtuką Padidinti, skaičiaus vertė atitinkamai didinama, kaip parodyta žemiau esančiame išvesties paveikslėlyje.
Kas yra „ng-show“ direktyva?
„ng-Show“ direktyva naudojama norint parodyti arba paslėpti nurodytą HTML elementą, remiantis išraiška, pateikta ngShow atribute. Fone elementas rodomas arba paslėptas pašalinant arba prie elemento pridėjus .ng-hide CSS klasę.
Fone elementas rodomas arba paslėptas pašalinant arba prie elemento pridėjus .ng-hide CSS klasę.
Pažvelkime į pavyzdį, kaip mes galime naudoti „ngshow event“ direktyvą, norėdami parodyti paslėptą elementą.
Event Registration Guru99 Global Event
Angular
Kodo paaiškinimas:
- Prie mygtuko elemento pridedame įvykio „ng-click“ direktyvą. Čia mes nurodome funkciją, vadinamą „ShowHide“, kuri yra apibrėžta mūsų valdiklyje - „DemoController“.
- „Ng-show“ atributą pridedame prie žymos „div“, kurioje yra tekstas „Kampinis“. Tai žymė, kurią ketiname parodyti / slėpti pagal „ng-show“ atributą.
-
Valdiklyje mes pridedame nario kintamąjį „IsVisible“ prie srities objekto. Šis atributas bus perduotas „ng-show“ kampiniam atributui (2 žingsnis), kad būtų galima valdyti „div“ valdiklio matomumą. Iš pradžių nustatome tai kaip „false“, kad pirmą kartą parodžius puslapį, „div“ žyma būtų paslėpta.
Pastaba: - Kai atributų „ng-show“ vertė yra „true“, paskesnis valdiklis, kuris, mūsų atveju, yra „div“ žyma, bus rodomas vartotojui. Kai ng-show atributas bus nustatytas kaip klaidingas, valdiklis bus paslėptas nuo vartotojo.
- Pridedame kodą prie „ShowHide“ funkcijos, kuri „IsVisible“ nario kintamąjį nustatys kaip „true“, kad vartotojui būtų galima parodyti „div“ žymą.
Jei kodas sėkmingai įvykdytas, paleidus kodą naršyklėje bus rodoma ši išvestis.
Išvestis: 1
Iš išvesties
- Iš pradžių galite pamatyti, kad „div“ žyma, kurios tekstas yra „AngularJS“, nerodoma ir taip yra todėl, kad iš pradžių „isVisible“ taikymo objektas nustatytas į „false“, kuris vėliau perduodamas „div“ žymos „ng-show“ direktyvai.
- Spustelėjus mygtuką „Rodyti kampinįJS“, jis pakeičia nario kintamąjį „isVisible“, kad taptų teisingas, taigi vartotojui matomas tekstas „Kampinis“. Žemiau pateiktas išėjimas bus rodomas vartotojui.
Dabar išvestyje rodoma div žyma su kampiniu tekstu.
Kas yra „ng-hide“ direktyva?
Naudojant „ ng-hide“ direktyvą , elementas bus paslėptas, jei išraiška yra TIESA. Jei išraiška yra NETIESA, bus rodomas elementas. Fone elementas rodomas arba paslėptas pašalinant arba prie elemento pridėjus .ng-hide CSS klasę.
Kita vertus, naudojant „ng-hide“, elementas yra paslėptas, jei išraiška yra teisinga, ir jis bus rodomas, jei jis yra klaidingas.
Pažvelkime į panašų pavyzdį, kaip parodyta „ngShow“, kad parodytume, kaip galima naudoti atributą „ngHide“.
Event Registration Guru99 Global Event
Angular
Kodo paaiškinimas:
- Prie mygtuko elemento pridedame įvykio „ng-click“ direktyvą. Čia mes nurodome funkciją, vadinamą „ShowHide“, kuri yra apibrėžta mūsų valdiklyje - „DemoController“.
- Atributą „ng-hide“ pridedame prie žymos „div“, kurioje yra tekstas „Kampinis“. Tai yra žyma, kurią ketiname parodyti / slėpti pagal „ng-show“ atributą.
- Valdiklyje prie srities objekto pridedame kintamąjį „isVisible“. Šis atributas bus perduotas „ng-show“ kampiniam atributui, kad būtų galima valdyti „div“ valdymo matomumą. Iš pradžių nustatome tai kaip „false“, kad pirmą kartą parodžius puslapį, „div“ žyma būtų paslėpta.
- Pridedame kodą prie „ShowHide“ funkcijos, kuri „IsVisible“ nario kintamąjį nustatys kaip „true“, kad vartotojui būtų galima parodyti „div“ žymą.
Jei kodas sėkmingai įvykdytas, paleidus kodą naršyklėje bus rodoma ši išvestis.
Išvestis:
Iš išvesties
- Iš pradžių galite pamatyti, kad iš pradžių rodoma div žyma, kurios tekstas yra „AngularJs“, nes „false“ ypatybės vertė siunčiama į „ng-hide“ direktyvą.
- Kai spustelėsime mygtuką „Slėpti kampą“, „true will“ nuosavybės vertė bus siunčiama į „ng-hide“ direktyvą. Taigi bus rodoma žemiau išvesta išvestis, kurioje bus paslėptas žodis „Kampinis“.
„AngularJS“ renginių klausytojų direktyvos
Galite pridėti „AngularJS“ įvykių klausytojų prie HTML elementų naudodami vieną ar kelias iš šių direktyvų:
- ng-neryškus
- ng-pokytis
- spustelėkite mygtuką
- ng-kopija
- ng supjaustytas
- ng-dblclick
- ng dėmesys
- ng-keydown
- ng klavišo paspaudimas
- „ng-keyup“
- ng-mousedown
- ng-mouseenter
- ng-mouseleave
- ng-mousemove
- ng-mouseover
- ng-mouseup
- ng-pasta
Santrauka
- Įvykių nurodymai naudojami kampu, norint pridėti pasirinktinį kodą, kad būtų galima reaguoti į įvykius, kuriuos sugeneruoja vartotojas, pvz., Mygtukų paspaudimai, klaviatūros ir pelės paspaudimai ir kt.
- Dažniausia įvykių direktyva yra „ng-click“ direktyva, naudojama paspaudimų įvykiams tvarkyti. Dažniausiai tai naudojama mygtuko paspaudimams, kur galima pridėti kodą, kad reaguotų į mygtuko paspaudimą.
- HTML elementai taip pat gali būti paslėpti arba atitinkamai parodyti vartotojui, naudojant kampinius atributus „ng-show“ ir „ng-hide“.