Direttive di evento

AngularJS prevede una serie di direttive per gestire gli eventi di interazione dell'utente con l'interfaccia grafica. Tra le più comuni segnaliamo:

ng-click
ng-dbl-click
ng-mousedown
ng-mouseup
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-keydown
ng-keyup
ng-keypress
ng-change

Si nota facilmente che le direttive ricalcano i classici gestori di evento JavaScript tramite attributi come onclick, ondblclick, ecc. Anche in questo caso il ruolo delle direttive di evento di Angular è quello di attributo e ad esse è possibile assegnare una qualsiasi espressione Angular.

Ma che bisogno c'è di queste direttive dal momento che fanno le stesse cose dei gestori di evento standard? Proviamo a spiegarlo con un esempio. Consideriamo il seguente codice:

<div>
<input type="number" ng-model="numero1"/>
+
<input type="number" ng-model="numero2"/>
=
<input type="number" ng-model="risultato"/>
</div>
<button onclick="risultato = numero1 + numero2">Somma</button>

Abbiamo tre caselle di testo e un pulsante e vogliamo che al clic sul pulsante venga visualizzato sulla terza casella di testo la somma delle prime due. Se proviamo ad eseguire questo codice però il risultato non è quello atteso: non vedremo alcun valore sulla terza casella.

Se sostituiamo all'attributo onclick la direttiva ng-click vedremo invece che tutto funziona come previsto:

<button ng-click="risultato = numero1 + numero2">Somma</button>

Il fatto è che l'assegnamento associato all'attributo onclick verrebbe eseguito nel classico contesto JavaScript e quindi alla variabile risultato verrebbe associata la somma delle variabili numero1 e numero2. Ma queste variabili non corrispondono alle variabili di scope del controller corrente, quindi non viene gestito il data binding. Al contrario, la direttiva ng-click esegue l'assegnamento nel contesto Angular, garantendo tutti gli automatismi previsti dal framework.

È molto importante comprendere questa differenza tra gestori di evento standard e direttive di evento, dal momento che rappresenta uno degli errori più frequenti commessi da chi si avvicina per la prima volta ad AngularJS.

Naturalmente possiamo assegnare alle direttive di evento anche funzioni purché accessibili dallo scope del controller corrente:

<button ng-click="somma()">Somma</button>

$scope.somma = function() {
	$scope.risultato = $scope.numero1 + $scope.numero2;
};

A tali funzioni possiamo passare dei parametri:

<button ng-click="somma(numero1, numero2)">Somma</button>

$scope.somma = function(x, y) {
	$scope.risultato = x + y;
};

Se abbiamo necessità di accedere ad informazioni specifiche riguardanti l'evento, possiamo passare alla funzione l'oggetto $event:

<button ng-click="somma(numero1, numero2, $event)">Somma</button>

$scope.somma = function(x, y, event) {
	$scope.risultato = x + y;
	console.log("È stato cliccato alla posizione " + event.clientX + ", " + event.clientY);
};

Nell'esempio abbiamo individuato le coordinate dello schermo su cui è stato effettuato il clic.

L'oggetto $event rappresenta l'oggetto standard che descrive l'evento catturato dal browser e generalmente gestito tramite JavaScript.