P-Programowanie

Zdarzenia

Ostatania modyfikacja: 19 kwietnia 2017, kategoria: Kurs angular

Zdarzenia są bardzo ważnym mechanizmem umożliwiającym interakcję użytkownika z naszą aplikację. Oczywiście, w AngularJS zdarzenia zostały obsłużone wyjątkowo dobrze. Czym są zdarzenia? Są to przechwycenia wszelkich operacji jakie może wykonać użytkownik w naszej aplikacji np. kliknięcie myszką, naciśnięcie klawisza.

Podpinanie zdarzeń

Zdarzenia w AngularJS podpinamy poprzez dodanie do dowolnego elementu HTML odpowiedniej dyrektywy reprezentującej zdarzenie. Jako parametr dyrektywy należy podać funkcję zwrotną, która zostanie wykonana w danej sytuacji. Składania zdarzenia:

<element nazwa_zdarzenia="funkcja" />

A więc przykładowo zdarzenie kliknięcia w przycisk wywołujące funkcje $scope.logowanie() wygląda następująco:

Pełny kod działającej aplikacji:

Do przycisku logowania zostało podpięte zdarzenie ng-click wywołujące funkcje logowanie(). Bindując zmienne lub funkcje podpięte do $scope z warstwą widoku zawsze pomijamy nazwę $scope. Efekt działania jest następujący:

W przypadku podania nieistniejącej nazwy funkcji do parametru dyrektywy zdarzenia, niestety nic się nie stanie. W konsoli nie pojawi się żaden błąd. Jeżeli coś nie działa a w konsoli nie ma błędów, warto w pierwszej kolejności sprawdzić czy zdarzenia podpięte są pod istniejące funkcje lub czy nie zapomnieliśmy o nawiasach.

Lista dostępnych zdarzeń

Oto lista dostępnych zdarzeń:

Zdarzenie Wywoływany gdy
ng-blur Dany element traci aktywność (traci focus)
ng-change Zmieni się model ng-model danego elementu
ng-click Kliknięcie myszką
ng-copy Nastąpi skopiowanie wartości elementu
ng-cut Nastąpi wycięcie wartości elementu
ng-dblclick Podwójne kliknięcie myszką
ng-focus Dany element zostaje aktywny (focus)
ng-keydown Naciśnięcie klawisza
ng-keypress Naciśnięcie klawisza (rozróżnia wielkość liter)
ng-keyup Puszczenie klawisza
ng-mousedown Naciśnięcie klawisza myszy
ng-mouseenter Najechanie myszą na element gdziekolwiek
ng-mouseleave Zjechanie myszą z elementu
ng-mousemove Poruszanie myszą po elemencie
ng-mouseover Najechanie myszą na element lub jego dzieci
ng-mouseup Puszczenie klawisza myszy
ng-paste Wklejenie wartości do elementu

Większości wymienionych zdarzeń w codziennej pracy nie używa się. Najważniejsze zdarzenia, które na pewno należy zapamiętać to ng-click oraz ng-change. Za pomocą kliknięcia możemy obsłużyć wszystkie przyciski i formularze w aplikacji.

Z kolei ng-change to wywołuje funkcje zwrotną podczas jakiejkolwiek zmiany modelu przez użytkownika, więc może np. przeliczyć w tle dane. Jest to dobra alternatywa dla zakładania obserwatorów na $scope o czym będzie w innym artykule.

Zdarzenie ng-change

Wcześniej czy później zdasz sobie sprawę, że ng-change jest jednym z najbardziej przydatnych zdarzeń. Aby zdarzenie działało, musi być nałożone na obiekt posiadający model podpięty dyrektywą ng-model. To właśnie zmiana wartości modelu wpływa na wywołanie ng-change. Przykładowe użycie:

Efekt działania jest przewidywalny:

Przy jakiejkolwiek zmianie modelu podpiętego do pola typu checkbox zostaje wywołana funkcja klikniecie(). Zwiększa ona wartość zmiennej ilosc, który jest następnie wyświetlany za pomocą wyrażenia {{ilosc}}. Dodatkowo zastosowana dyrektywa ng-if sprawdza aktalny stan pola i wyświetla odpowiedni span z tekstem.

Użytkownik Karol napisał:


Nikt jeszcze nie skomentował tego artykułu. Co o nim sądzisz?

Zachęcam Cię do zostawienia komentarza!

Ilość znaków: 0