Gestione degli eventi in angularJS
Con javascript o jquery puro, interagiamo spesso con il DOM, come catturare clic, hover, form submit, tag change events, angularJS ci fornisce una soluzione più concisa per aiutarci a gestire questi problemi. Alcune direttive per la gestione degli eventi in angularJS:
- ng-clic
- ng-dbl-clic
- ng-keydown
- ng-keyup
- ng-mousedown
- ng-mouseenter
- ng-mouseleave
- ng-cambiamento
- ng-submit
- …
Vedi altri documenti qui: https://docs.angularjs.org/api/ng/directive/
Abbiamo semplicemente bisogno di inserire la direttiva di gestione degli eventi nel tag che vogliamo catturare l'evento e definire la funzione da usare. Vedi l'esempio qui sotto:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hello world angular</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body> <div ng-app="calculateApp" ng-controller="calculateController"> <label>Quantity:</label> <input type="number" min="1" max="10" ng-model="qty" /> <label>Price</label> <input type="number" min="0" max="5000" ng-model="price" /> <div>Total: {{total | currency: '$ '}}</div> <button ng-click="calculate()">Calculate</button> </div> <script> var app = angular.module('calculateApp', []); app.controller('calculateController',function($scope){ $scope.qty = 0; $scope.price = 0; $scope.total = 0; $scope.calculate = function(){ this.total = this.qty * this.price; } }); </script> </body> </html>In questo esempio, gestiamo l'evento click dell'utente tramite la direttiva ng-click , che chiama la funzione calcola(). Sotto il livello di script, definisci il metodo (metodo/funzione) calcola e gestisci la logica secondo l'intenzione che desideriamo. Lo stesso vale per il resto degli eventi.
Considera il seguente esempio:
<!DOCTYPE html> <html lang="en" ng-app="exampleviewApp"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example View AngularJS</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> </head> <body ng-controller="mainController"> <h2>Hello {{name}}</h2> <input type="text" ng-model="name" ng-change="change()" /> {{length}} </body> <script> var exampleviewApp = angular.module('exampleviewApp', []); exampleviewApp.controller('mainController', function($scope) { $scope.name = ''; $scope.length = 0; $scope.change = function(){ $scope.length = $scope.name.length; } }); </script> </html>Risultato durante l'esecuzione del codice:
Nell'esempio sopra, vedremo la soluzione quando si combina l'associazione dei dati con l'evento di modifica, il codice è molto pulito, breve e i dati vengono aggiornati in tempo reale.
