Při vytváření webových aplikací bude dříve nebo později vaše aplikace muset zpracovávat události DOM, jako jsou kliknutí myší, pohyby, stisknutí klávesnice, změna událostí atd.
AngularJS může přidat funkce, které lze použít ke zpracování takových událostí.
Například pokud je na stránce tlačítko a chcete něco zpracovat, když na tlačítko kliknete, můžeme použít direktivu události ng-click.
Během tohoto kurzu se podrobně podíváme na směrnice událostí.
V tomto výukovém programu se naučíte
- Co je směrnice ng-click?
- Co je směrnice ng-show?
- Co je směrnice ng-hide?
Co je směrnice ng-click?
„Směrnice ng-click“ je používán platit vlastní chování, když prvek v HTML klepnutí. To se obvykle používá pro tlačítka, protože to je nejběžnější místo pro přidávání událostí, které reagují na kliknutí provedená uživatelem
Podívejme se na jednoduchý příklad toho, jak můžeme implementovat událost kliknutí.
V tomto příkladu budeme mít proměnnou čítače, která zvýší hodnotu, když uživatel klikne na tlačítko.
Event Registration Guru99 Global Event
The Current Count is {{count}}
Vysvětlení kódu:
- Nejprve používáme direktivu ng-init k nastavení hodnoty počtu lokálních proměnných na 0.
- Poté tlačítko zavádíme direktivu událostí ng-click. V této směrnici píšeme kód, který zvýší hodnotu proměnné count o 1.
- Zde uživateli zobrazujeme hodnotu proměnné count.
Pokud je kód úspěšně proveden, při spuštění kódu v prohlížeči se zobrazí následující výstup.
Výstup:
Z výše uvedeného výstupu
- Vidíme, že je zobrazeno tlačítko „Přírůstek“ a hodnota proměnné count je zpočátku nulová.
- Když kliknete na tlačítko Přírůstek, hodnota počtu se odpovídajícím způsobem zvýší, jak je znázorněno na výstupním obrázku níže.
Co je směrnice ng-show?
Direktiva ng-Show se používá k zobrazení nebo skrytí daného prvku HTML na základě výrazu poskytnutého atributu ngShow. Na pozadí se prvek zobrazí nebo skryje odebráním nebo přidáním třídy CSN .ng-hide do prvku.
Na pozadí se prvek zobrazí nebo skryje odebráním nebo přidáním třídy CSN .ng-hide do prvku.
Podívejme se na příklad toho, jak můžeme použít direktivu „ngshow event“ k zobrazení skrytého prvku.
Event Registration Guru99 Global Event
Angular
Vysvětlení kódu:
- Připojujeme direktivu události ng-click k tlačítkovému prvku. Zde odkazujeme na funkci nazvanou „ShowHide“, která je definována v našem řadiči - DemoController.
- Atribut ng-show připevňujeme k tagu div, který obsahuje text Angular. Toto je značka, kterou zobrazíme / skryjeme na základě atributu ng-show.
-
V kontroleru připojujeme členskou proměnnou "IsVisible" k objektu oboru. Tento atribut bude předán úhlovému atributu ng-show (krok č. 2) pro řízení viditelnosti ovládacího prvku div. Zpočátku to nastavujeme na hodnotu false, takže při prvním zobrazení stránky bude značka div skrytá.
Poznámka: - Když jsou atributy ng-show nastaveny na hodnotu true, uživateli se zobrazí následující ovládací prvek, kterým je v našem případě značka div. Když je atribut ng-show nastaven na hodnotu false, ovládací prvek bude uživateli skrytý.
- Přidáváme kód do funkce ShowHide, který nastaví členskou proměnnou IsVisible na true, aby se uživateli mohla zobrazit značka div.
Pokud je kód úspěšně proveden, při spuštění kódu v prohlížeči se zobrazí následující výstup.
Výstup: 1
Z výstupu
- Zpočátku můžete vidět, že značka div, která má text „AngularJS“, se nezobrazuje, a to proto, že objekt oboru isVisible je zpočátku nastaven na hodnotu false, která je následně předána direktivě ng-show značky div.
- Když kliknete na tlačítko „Zobrazit AngularJS“, změní se členská proměnná isVisible na skutečnou a text „Angular“ se tak stane viditelným pro uživatele. Uživateli se zobrazí níže uvedený výstup.
Výstup nyní zobrazuje značku div s hranatým textem.
Co je směrnice ng-hide?
Se směrnicí ng-hide bude prvek skryt, pokud je výraz TRUE. Pokud je výraz FALSE, prvek se zobrazí. Na pozadí se prvek zobrazí nebo skryje odebráním nebo přidáním třídy CSN .ng-hide do prvku.
Na druhou stranu s ng-hide je prvek skrytý, pokud je výraz pravdivý, a zobrazí se, pokud je nepravdivý.
Podívejme se na podobný příklad jako ten, který je zobrazen pro ngShow, abychom ukázali, jak lze použít atribut ngHide.
Event Registration Guru99 Global Event
Angular
Vysvětlení kódu:
- Připojujeme direktivu události ng-click k tlačítkovému prvku. Zde odkazujeme na funkci nazvanou ShowHide, která je definována v našem řadiči - DemoController.
- Atribut ng-hide připevňujeme ke značce div, která obsahuje text Angular. Toto je značka, kterou zobrazíme / skryjeme na základě atributu ng-show.
- V řadiči připojujeme členskou proměnnou isVisible k objektu oboru. Tento atribut bude předán úhlovému atributu ng-show k ovládání viditelnosti ovládacího prvku div. Zpočátku to nastavujeme na hodnotu false, takže při prvním zobrazení stránky bude značka div skrytá.
- Přidáváme kód do funkce ShowHide, který nastaví členskou proměnnou IsVisible na true, aby se uživateli mohla zobrazit značka div.
Pokud je kód úspěšně proveden, při spuštění kódu v prohlížeči se zobrazí následující výstup.
Výstup:
Z výstupu
- Zpočátku můžete vidět, že značka div, která má text "AngularJs", je zpočátku zobrazena, protože hodnota vlastnosti false je odeslána do směrnice ng-hide.
- Když klikneme na tlačítko „Skrýt úhlové“, hodnota vlastnosti true bude odeslána do direktivy ng-hide. Proto se zobrazí níže uvedený výstup, ve kterém bude skryto slovo „Úhlové“.
Směrnice posluchače událostí AngularJS
Posluchače událostí AngularJS můžete přidat do svých prvků HTML pomocí jedné nebo více z těchto směrnic:
- ng-blur
- ng-změna
- ng-click
- ng-copy
- ng-cut
- ng-dblclick
- ng-focus
- ng-keydown
- ng-keypress
- ng-keyup
- ng-mousedown
- ng-mouseenter
- ng-mouseleave
- ng-mousemove
- ng-mouseover
- ng-mouseup
- ng-pasta
souhrn
- Direktivy událostí se v Angular používají k přidání vlastního kódu k reakci na události generované zásahem uživatele, jako jsou kliknutí na tlačítka, kliknutí na klávesnici a myš atd.
- Nejběžnější direktivou událostí je direktiva ng-click, která se používá ke zpracování událostí kliknutí. Nejběžnější použití je pro kliknutí na tlačítka, kde lze přidat kód, který reaguje na kliknutí na tlačítko.
- Prvky HTML lze také příslušně skrýt nebo zobrazit uživateli pomocí úhlových atributů ng-show a ng-hide.