Manipulação de eventos em angularJS
Com javascript ou jquery puro, muitas vezes interagimos com o DOM, como captura de cliques, foco, envio de formulários, eventos de alteração de tags, o angularJS nos fornece uma solução mais concisa para nos ajudar a lidar com esses problemas. Algumas diretivas para manipulação de eventos em angularJS:
- ng-clique
- ng-dbl-clique
- ng-keydown
- ng-keyup
- ng-mousedown
- ng-mouseenter
- ng-mouseleave
- ng-change
- ng-submit
- …
Veja mais documentos aqui: https://docs.angularjs.org/api/ng/directive/
Nós simplesmente precisamos colocar a diretiva de manipulação de eventos na tag que queremos capturar o evento e definir a função a ser usada. Veja o exemplo abaixo:
<!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>Neste exemplo, tratamos o evento click do usuário por meio da diretiva ng-click , que chama a função calculate(). Sob a camada de script, defina o método (método/função) calcule e trate a lógica de acordo com a intenção que desejamos. O mesmo vale para os demais eventos.
Considere o seguinte exemplo:
<!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>Resultado ao executar o código:
No exemplo acima, veremos a solução ao combinar data binding com o evento change, o código é bem limpo, curto e os dados são atualizados em tempo real.
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
