Envie o formulário pressionando Enter com AngularJS

Nesse caso específico, quais opções eu tenho para fazer com que essas entradas chamem uma função quando pressiono Enter?

// HTML view //
<form>
    <input type="text" ng-model="name" <!-- Press ENTER and call myFunc --> />
    <br />
    <input type="text" ng-model="email" <!-- Press ENTER and call myFunc --> />
</form>

// 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 caixa. Você já tentou o ngSubmit no seu elemento de formulário?

<form ng-submit="myFunc()" ng-controller="mycontroller">
   <input type="text" ng-model="name" />
    <br />
    <input type="text" ng-model="email" />
</form>

EDIT: pelo comentário sobre o botão enviar, consulte Enviando um formulário pressionando enter sem um botão enviar, que fornece a solução de:

<input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>

Se você não gostar da solução oculta do botão de envio, precisará vincular uma função do controlador ao evento Enter ou pressionar a tecla Enter. Isso normalmente requer uma diretiva personalizada, mas a biblioteca AngularUI já possui uma boa solução de pressionamento de tecla. Veja http://angular-ui.github.com/

Após adicionar a lib angularUI, seu código seria algo como:

<form ui-keypress="{13:'myFunc($event)'}">
  ... input fields ...
</form>

ou você pode vincular a tecla Enter a cada campo individual.

Além disso, consulte estas perguntas de SO para criar uma diretiva keypres simples: Como posso detectar onKeyUp no AngularJS?

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

<input ng-keyup="$event.keyCode == 13 && myFunc()"... />

Se você deseja chamar a função sem formulário, 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 :

<div ng-app="" ng-controller="MainCtrl">
    <input type="text" ng-enter="doSomething()">    
</div>

Submeto outras diretrizes impressionantes no meu twitter e na minha conta principal .

Se você tiver apenas uma entrada, poderá usar a tag do formulário.

<form ng-submit="myFunc()" ...>

Se você possui mais de uma entrada ou não deseja usar a tag de formulário ou deseja anexar a funcionalidade da tecla enter a um campo específico, é possível incorporá-la a uma entrada específica da seguinte maneira:

<input ng-keyup="$event.keyCode == 13 && myFunc()" ...>

Eu queria algo um pouco mais extensível / semântico do que as respostas fornecidas, então escrevi uma diretiva que pega um objeto javascript de maneira semelhante à incorporada ngClass:

HTML

<input key-bind="{ enter: 'go()', esc: 'clear()' }" type="text"></input>

Os valores do objeto são avaliados no contexto do escopo da diretiva - verifique se estão entre aspas simples, caso contrário todas as funções serão executadas quando a diretiva for carregada (!)

Então, por exemplo: em esc : 'clear()'vez deesc : 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,

<input type="text" ng-model="data" ng-keypress="($event.charCode==13)? myfunc() : return"> 

Envie uma entrada ao pressionar 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ê deseja validação de dados também

<!-- form -->
<form name="loginForm">
...
  <input type="email" ng-keyup="$loginForm.$valid && $event.keyCode == 13 && signIn()" ng-model="email"... />
  <input type="password" ng-keyup="$loginForm.$valid && $event.keyCode == 13 && signIn()" ng-model="password"... />
</form>

A adição importante aqui é $loginForm.$validque validará o formulário antes de executar a função. Você precisará adicionar outros atributos para validação que estão além do escopo desta pergunta.

Boa sorte.

Só queria ressaltar que, no caso de haver um botão de envio oculto, você pode simplesmente usar a diretiva ngShow e configurá-la como false da seguinte forma:

HTML

<form ng-submit="myFunc()">
    <input type="text" name="username">
    <input type="submit" value="submit" ng-show="false">
</form>

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

<div ng-controller="mycontroller">

  <form ng-submit="myFunc()">
    <input type="text" ng-model="name" <!-- Press ENTER and call myFunc --> />
  </form>

  <br />

  <form ng-submit="myFunc()">
    <input type="text" ng-model="email" <!-- Press ENTER and call myFunc --> />
  </form>

</div>

O agrupamento de cada campo de entrada em sua própria tag de formulário permite que ENTER chame o envio em qualquer formulário. Se você usar uma tag de formulário para ambos, precisará incluir um botão de envio.

Será um pouco mais limpo usando uma classe CSS em vez de repetir estilos embutidos.

CSS

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

HTML

<form ng-submit="myFunc()">
    <input type="text" ng-model="name" />
    <br />
    <input type="text" ng-model="email" />
    <input type="submit" />
</form>

FWIW - Aqui está uma diretiva que eu usei para um modal básico de confirmação / alerta de inicialização, sem a necessidade de um <form>

(basta mudar a ação de clique do jQuery para o que quiser e adicionar 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);
            });
        }
    };
});