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:

<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>{{ilosc}}</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 {{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