Enviar formulário ao pressionar Enter com AngularJS

Neste caso em particular, quais opções eu tenho para fazer essas inputs chamar uma function quando eu pressionar Enter?

// HTML view //  <input type="text" ng-model="name"  /> 
<input type="text" ng-model="email" /> // Controller // .controller('mycontroller', ['$scope',function($scope) { $scope.name = ''; $scope.email = ''; // Function to be called when pressing ENTER $scope.myFunc = function() { alert('Submitted'); }; }])

Angular suporta isso fora da checkbox. Você já tentou ngSubmit no seu elemento de formulário?

 

EDIT: Por o comentário sobre o botão de envio, consulte enviando um formulário pressionando enter sem um botão de envio que dá a solução de:

  

Se você não gostar da solução de botão de envio oculta, será necessário vincular uma function de controlador ao evento de pressionamento de tecla ou chave Enter. Isso normalmente requer uma diretiva personalizada, mas a biblioteca AngularUI já tem uma solução de pressionamento de tecla configurada. Veja http://angular-ui.github.com/

Depois de adicionar o angularUI lib, seu código seria algo como:

 
... input fields ...

ou você pode ligar o pressionamento de tecla enter a cada campo individual.

Além disso, veja este SO perguntas para criar uma diretiva keypres simples: Como posso detectar onKeyUp em AngularJS?

EDIT (2014-08-28): No momento em que essa resposta foi escrita, o ng-keypress / ng-keyup / ng-keydown não existia como diretivas nativas no AngularJS. Nos comentários abaixo @ darlan-alves tem uma boa solução com:

Se você quiser chamar a function sem formulário, você pode usar minha diretiva ngEnter:

Javascript :

 angular.module('yourModuleName').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': event}); }); event.preventDefault(); } }); }; }); 

HTML :

 

Eu envio outras diretivas incríveis no meu twitter e na minha conta .

Se você tiver apenas uma input, poderá usar a tag de formulário.

 

Se você tiver mais de uma input, ou não desejar usar a tag de formulário ou quiser append a funcionalidade de inserir chave a um campo específico, poderá integrá-la a uma input específica da seguinte maneira:

  

Eu queria algo um pouco mais extensível / semântico do que as respostas dadas, então eu escrevi uma diretiva que leva um object javascript de uma maneira semelhante ao built-in ngClass :

HTML

  

Os valores do object são avaliados no contexto do escopo da diretiva – assegure que eles sejam encapsulados em aspas simples, caso contrário todas as funções serão executadas quando a diretiva for carregada (!)

Por exemplo: esc : 'clear()' vez de esc : clear()

Javascript

 myModule .constant('keyCodes', { esc: 27, space: 32, enter: 13, tab: 9, backspace: 8, shift: 16, ctrl: 17, alt: 18, capslock: 20, numlock: 144 }) .directive('keyBind', ['keyCodes', function (keyCodes) { function map(obj) { var mapped = {}; for (var key in obj) { var action = obj[key]; if (keyCodes.hasOwnProperty(key)) { mapped[keyCodes[key]] = action; } } return mapped; } return function (scope, element, attrs) { var bindings = map(scope.$eval(attrs.keyBind)); element.bind("keydown keypress", function (event) { if (bindings.hasOwnProperty(event.which)) { scope.$apply(function() { scope.$eval(bindings[event.which]); }); } }); }; }]); 

Outra abordagem seria usar ng-keypress,

  

Envie uma input pressionando Enter com AngularJS – jsfiddle

Diretiva muito boa, limpa e simples com shift + enter support:

 app.directive('enterSubmit', function () { return { restrict: 'A', link: function (scope, elem, attrs) { elem.bind('keydown', function(event) { var code = event.keyCode || event.which; if (code === 13) { if (!event.shiftKey) { event.preventDefault(); scope.$apply(attrs.enterSubmit); } } }); } } }); 

Se você quiser validação de dados também

  
...

A adição importante aqui é $loginForm.$valid que valida o formulário antes de executar a function. Você terá que adicionar outros atributos para validação que estão além do escopo desta questão.

Boa sorte.

Só queria salientar que, no caso de ter um botão de envio oculto, você pode simplesmente usar a diretiva ngShow e configurá-la como falsa assim:

HTML

 

Use ng-submit e apenas envolva as duas inputs em tags de formulário separadas:

 
/>

/>

Agrupar cada campo de input em sua própria tag de formulário permite que o ENTER invoque o envio em qualquer um dos formulários. Se você usar uma tag de formulário para ambos, terá que include um botão de envio.

Será um pouco mais limpo usando uma class CSS em vez de repetir estilos inline.

CSS

 input[type=submit] { position: absolute; left: -9999px; } 

HTML

 

FWIW – Aqui está uma diretiva que eu usei para um modal bootstrap de confirmação / alerta básico, sem a necessidade de um

(apenas mude a ação de clique do jQuery para o que quiser, e adicione data-easy-dismiss à sua tag modal)

 app.directive('easyDismiss', function() { return { restrict: 'A', link: function ($scope, $element) { var clickSubmit = function (e) { if (e.which == 13) { $element.find('[type="submit"]').click(); } }; $element.on('show.bs.modal', function() { $(document).on('keypress', clickSubmit); }); $element.on('hide.bs.modal', function() { $(document).off('keypress', clickSubmit); }); } }; });