Pri vytváraní webových aplikácií bude skôr alebo neskôr potrebné, aby vaša aplikácia spracovala udalosti DOM, ako sú kliknutia myšou, pohyby, stlačenie klávesnice, zmena udalostí atď.
AngularJS môže pridať funkcionalitu, ktorá sa dá použiť na zvládnutie takýchto udalostí.
Napríklad, ak je na stránke tlačidlo a chcete niečo spracovať, keď na dané tlačidlo kliknete, môžeme použiť direktívu udalostí ng-click.
Počas tohto kurzu sa podrobne pozrieme na smernice o udalostiach.
V tomto návode sa naučíte
- Čo je to smernica ng-click?
- Čo je smernica o ng-show?
- Čo je smernica ng-hide?
Čo je to smernica ng-click?
„ Smernica ng-click“ sa používa na použitie vlastného správania pri kliknutí na prvok v kóde HTML. Toto sa zvyčajne používa pre tlačidlá, pretože to je najbežnejšie miesto na pridávanie udalostí, ktoré reagujú na kliknutia vykonané používateľom
Pozrime sa na jednoduchý príklad toho, ako môžeme implementovať udalosť kliknutia.
V tomto príklade budeme mať premennú počítadla, ktorá sa bude zvyšovať, keď používateľ klikne na tlačidlo.
Event Registration Guru99 Global Event
The Current Count is {{count}}
Vysvetlenie kódu:
- Najprv používame direktívu ng-init na nastavenie hodnoty počtu lokálnych premenných na 0.
- Potom zavádzame k tlačidlu direktívu udalostí ng-click. V tejto smernici píšeme kód na zvýšenie hodnoty premennej count o 1.
- Tu používateľovi zobrazujeme hodnotu premennej count.
Ak sa kód úspešne vykoná, pri spustení kódu v prehliadači sa zobrazí nasledujúci výstup.
Výkon:
Z vyššie uvedeného výstupu
- Vidíme, že je zobrazené tlačidlo „Prírastok“ a hodnota premennej count je spočiatku nulová.
- Keď kliknete na tlačidlo Zvýšiť, hodnota počtu sa príslušne zvýši, ako je to znázornené na výstupnom obrázku nižšie.
Čo je smernica o ng-show?
Direktíva ng-Show sa používa na zobrazenie alebo skrytie daného prvku HTML na základe výrazu poskytnutého atribútu ngShow. Na pozadí je prvok zobrazený alebo skrytý odstránením alebo pridaním triedy CSS .ng-hide do prvku.
Na pozadí je prvok zobrazený alebo skrytý odstránením alebo pridaním triedy CSS .ng-hide do prvku.
Pozrime sa na príklad toho, ako môžeme pomocou smernice „ngshow event“ zobraziť skrytý prvok.
Event Registration Guru99 Global Event
Angular
Vysvetlenie kódu:
- Pripájame direktívu udalostí ng-click k prvku button. Tu odkazujeme na funkciu s názvom „ShowHide“, ktorá je definovaná v našom ovládači - DemoController.
- Atribút ng-show pripájame k značke div, ktorá obsahuje text Angular. Toto je značka, ktorú ukážeme / skryjeme na základe atribútu ng-show.
-
V radiči pripájame členskú premennú „IsVisible“ k objektu rozsahu. Tento atribút bude odovzdaný uhlovému atribútu ng-show (krok 2) na kontrolu viditeľnosti ovládacieho prvku div. Pôvodne nastavujeme túto hodnotu na hodnotu false, takže pri prvom zobrazení stránky bude značka div skrytá.
Poznámka: - Keď je atribút ng-show nastavený na hodnotu true, používateľovi sa zobrazí následná kontrola, ktorou je v našom prípade značka div. Keď je atribút ng-show nastavený na hodnotu false, bude ovládací prvok pred používateľom skrytý.
- Pridávame kód do funkcie ShowHide, ktorý nastaví členskú premennú IsVisible na hodnotu true, aby sa používateľovi mohla zobraziť značka div.
Ak sa kód úspešne vykoná, pri spustení kódu v prehliadači sa zobrazí nasledujúci výstup.
Výstup: 1
Z výstupu
- Spočiatku môžete vidieť, že značka div, ktorá má text „AngularJS“, sa nezobrazuje, a to preto, že objekt isVisible scope je pôvodne nastavený na hodnotu false, ktorá sa následne odovzdá smernici ng-show značky div.
- Po kliknutí na tlačidlo „Zobraziť AngularJS“ sa členská premenná isVisible zmení na skutočnú a text „Angular“ sa tak stane viditeľným pre používateľa. Používateľovi sa zobrazí nasledujúci výstup.
Na výstupe sa teraz zobrazuje značka div s textom Angular.
Čo je smernica ng-hide?
Pri smernici ng-hide bude prvok skrytý, ak má výraz hodnotu PRAVDA. Ak je výraz FALSE, prvok sa zobrazí. Na pozadí je prvok zobrazený alebo skrytý odstránením alebo pridaním triedy CSS .ng-hide do prvku.
Na druhej strane s ng-hide je prvok skrytý, ak je výraz pravdivý, a zobrazí sa, ak je nepravdivý.
Pozrime sa na podobný príklad, aký je uvedený pre ngShow, aby sme ukázali, ako je možné použiť atribút ngHide.
Event Registration Guru99 Global Event
Angular
Vysvetlenie kódu:
- Pripájame direktívu udalostí ng-click k prvku button. Tu odkazujeme na funkciu s názvom ShowHide, ktorá je definovaná v našom ovládači - DemoController.
- Atribút ng-hide pripájame k značke div, ktorá obsahuje text Angular. Toto je značka, ktorú sa chystáme zobraziť / skryť na základe atribútu ng-show.
- V radiči pripájame členskú premennú isVisible k objektu rozsahu. Tento atribút sa odovzdá uhlovému atribútu ng-show na riadenie viditeľnosti ovládacieho prvku div. Pôvodne nastavujeme túto hodnotu na hodnotu false, takže pri prvom zobrazení stránky bude značka div skrytá.
- Pridávame kód do funkcie ShowHide, ktorý nastaví členskú premennú IsVisible na hodnotu true, aby sa používateľovi mohla zobraziť značka div.
Ak sa kód úspešne vykoná, pri spustení kódu v prehliadači sa zobrazí nasledujúci výstup.
Výkon:
Z výstupu
- Spočiatku vidíte, že značka div, ktorá má text „AngularJs“, sa pôvodne zobrazuje, pretože hodnota vlastnosti false sa posiela do smernice ng-hide.
- Keď klikneme na tlačidlo „Skryť uhlové“, hodnota vlastnosti true sa odošle do smernice ng-hide. Preto sa zobrazí výstup uvedený nižšie, v ktorom bude skryté slovo „Uhlové“.
Smernice poslucháča udalostí AngularJS
Poslucháčov udalostí AngularJS môžete pridať do svojich prvkov HTML pomocou jednej alebo viacerých z týchto smerníc:
- ng-blur
- ng-zmena
- ng-klik
- ng-copy
- ng-strih
- ng-dblclick
- ng-zameranie
- ng-keydown
- ng-keypress
- ng-keyup
- ng-mousedown
- ng-mouseenter
- ng-mouseleave
- ng-mousemove
- ng-mouseover
- ng-mouseup
- ng-pasta
Zhrnutie
- Direktívy udalostí sa v Angular používajú na pridanie vlastného kódu reagujúceho na udalosti generované zásahom používateľa, ako sú kliknutia na tlačidlá, klávesnice a myši atď.
- Najbežnejšou smernicou udalostí je smernica ng-click, ktorá sa používa na spracovanie udalostí kliknutí. Najčastejšie sa to používa pre kliknutia na gombíky, kde je možné pridať kód reagujúci na kliknutie na gombík.
- Prvky HTML možno tiež príslušným spôsobom skryť alebo zobraziť používateľovi pomocou uhlových atribútov ng-show a ng-hide.