用AngularJS按Enter键提交表单

Question

在这种特殊情况下，当我按Enter键时，我必须使用哪些选项使这些输入调用函数？

Html：

<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');
    };
}])

Answer 1

如果只有一个输入，则可以使用表单标记。

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

如果您有多个输入，或不想使用表单标记，或想将enter键功能附加到特定字段，则可以将其内联到特定输入，如下所示：

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

Answer 2

如果您想在没有表单的情况下调用函数，可以使用我的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>

我在我的推特和gist账户上提交了其他令人敬畏的指令。

Answer 3

Angular支持开箱即用。你试过在表单元素上提交吗？

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

编辑：根据有关“提交”按钮的评论，请参阅按enter键提交表单，但不使用“提交”按钮，该按钮提供以下解决方案：

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

如果您不喜欢隐藏的提交按钮解决方案，则需要将控制器函数绑定到Enter keypress或keyup事件。这通常需要一个自定义指令，但AngularUI库已经设置了一个很好的按键解决方案。看见http://angular-ui.github.com/

添加angularUI库后，您的代码如下所示：

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

或者可以将enter键绑定到每个单独的字段。

此外，请参阅创建简单keypres指令的SO问题：如何在AngularJS中检测onKeyUp？

编辑（2014-08-28）：在编写此答案时，ng keypress/ng keyup/ng keydown在AngularJS中不作为本机指令存在。在下面的评论中，@darlan alves有一个很好的解决方案：

<代码>