AngularJS - detectando o evento Enter através de uma diretiva ngEnter
O AngularJS tem inúmeras diretivas e funções para criar rapidamente uma aplicação porém uma que não existe no pacote do framework e que faz bastante falta é um evento 'on-Enter' para chamar uma função ou método. Por exemplo se estou desenvolvendo um formulário e quero que ao preencher um campo e apertar o Enter uma função seja chamada, seja para validar algum dado, seja para efetuar um login.
Apesar de não existir um evento deste tipo o AngularJS permite a criação de diretivas personalizadas. Assim podemos criar a nossa própria diretiva ng-Enter.
Abaixo está uma diretiva simples que permite incluir em sua aplicação um ng-enter e, através deste, chamar uma função qualquer.
O app. do exemplo acima é o objeto definido para sua aplicação:
É isso! Basta adicionar um ng-enter="myFunction()" no elemento que deseja detectar a tecla Enter (um campo de Input de texto por exemplo).
Fonte de consulta: http://eric.sau.pe/angularjs-detect-enter-key-ngenter/
Apesar de não existir um evento deste tipo o AngularJS permite a criação de diretivas personalizadas. Assim podemos criar a nossa própria diretiva ng-Enter.
Abaixo está uma diretiva simples que permite incluir em sua aplicação um ng-enter e, através deste, chamar uma função qualquer.
/*
Esta diretiva permite chamar uma função qualquer ao pressionar a tecla Enter.
*/
app.directive('ngEnter', function () {
return function (scope, element, attrs) {
element.bind("keydown keypress", function (event) {
if(event.which === 13) {
scope.$apply(function (){
scope.$eval(attrs.ngEnter);
});
event.preventDefault();
}
});
};
});
O app. do exemplo acima é o objeto definido para sua aplicação:
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="pt-br">
<script>
var app = angular.module('myApp', []);
</script>
</head>
</html>
É isso! Basta adicionar um ng-enter="myFunction()" no elemento que deseja detectar a tecla Enter (um campo de Input de texto por exemplo).
<input
type = "password"
ng-model = "pass"
name = "pass"
ng-enter = "myFunction()"
/>
Fonte de consulta: http://eric.sau.pe/angularjs-detect-enter-key-ngenter/
Comentários
Postar um comentário