Zdarzenia
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:
<button ng-click="logowanie()">Zaloguj</button>
Pełny kod działającej aplikacji:
<script>
var app = angular.module("mainModule", []);
app.controller('simpleCtrl', simpleController);
function simpleController($scope) {
$scope.uzytkownik = {
login: '',
haslo: ''
};
$scope.logowanie = function() {
console.log('wpisany login: ' + $scope.uzytkownik.login);
console.log('wpisane haslo: ' + $scope.uzytkownik.haslo);
console.log('ktos kliknął logowanie!');
};
}
</script>
<body ng-app="mainModule" ng-controller="simpleCtrl">
<p>Login: <input ng-model="uzytkownik.login" /></p>
<p>Hasło: <input ng-model="uzytkownik.haslo" /></p>
<button ng-click="logowanie()">Zaloguj</button>
</body>
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:
<script>
var app = angular.module("mainModule", []);
app.controller('simpleCtrl', simpleController);
function simpleController($scope) {
$scope.check = false;
$scope.ilosc = 0;
$scope.klikniecie = function() {
$scope.ilosc++;
}
}
</script>
<body ng-app="mainModule" ng-controller="simpleCtrl">
<p>Zaznacz checkbox: <input type="checkbox" ng-model="check" ng-change="klikniecie()" /></p>
<p>
Checkbox jest
<span ng-if="check" style="color:#00CE00; font-weight:bold;">zaznaczony</span>
<span ng-if="!check" style="color:#FF0000; font-weight:bold;">odznaczony</span>
<p>
<p>Został kliknięty <b></b> razy</p>
</body>
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 _. Dodatkowo zastosowana dyrektywa _ng-if sprawdza aktalny stan pola i wyświetla odpowiedni span z tekstem.
