Question

我正在使用AngularJS并且其中包含一个ng-submit的表单：

  <div ng-controller="LoginController as vm">
    <form class="login-form" name="vm.form" ng-submit="vm.login()">
            <h3 class="form-title">Sign In</h3>

            <div class="form-group">
                <label class="control-label">E-mailaddress</label>
                <input class="form-control" type="text" 
                      name="email" ng-model="vm.email"/>
            </div>
            <div class="form-group">
                <label class="control-label">Password</label>
                <input class="form-control" type="password" name="password" ng-model="vm.password"/>
            </div>
            <div class="form-actions">
                <button type="submit" class="btn btn-success uppercase">Login</button>
            </div>    
        </form>
   </div>

问题：当我在Login上手动点击时，一切正常。通过调用ng-submit正确使用vm.login()。但是，当我按下回车键时，不会调用ng-submit。我已经搜索了很长时间，看了一些例子，在GitHub上阅读了这些问题，但无法弄明白......有什么建议吗？

修改

请求的控制器代码：

 angular.module('app').controller('LoginController', function LoginController(LoginFactory, $state) {
        'use strict';
        var vm = this;

        vm.login = login;

        function login() {
            console.log('login');
            LoginFactory.login(vm.email, vm.password).then(function success(response) {
                LoginFactory.setUser(response.data.data.user);
                vm.user = response.data.data.user;
                var savedState = LoginFactory.getOnLoginState();
                $state.go(!savedState.state ? 'root.dashboard' : savedState.state, savedState.stateParams);
            }, handleError);
        }

    });

Answer 1

或者您也可以通过构建ng-enter指令并使用它来解决它。以下是要执行此操作的代码段。

angular.module('myApp').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();
        }
    });
};

}）;

Answer 2

这不会那样，因为我们可以查看Angular's docs：

如果表单有2个以上的输入字段且没有按钮或输入[type = submit]，则按Enter键不会触发提交

作为一种解决方法，我建议使用两个表单标签，每个字段一个，在ng-submit中使用相同的功能，如：

<div ng-controller="LoginFactory">
    <form class="login-form" ng-submit="vm.login()">
        <h3 class="form-title">Sign In</h3>

        <div class="form-group">
            <label class="control-label">E-mailaddress</label>
            <input class="form-control" type="text"
                    name="email" ng-model="vm.email"/>
        </div>
    </form>
    <form class="login-form" ng-submit="vm.login()">
        <div class="form-group">
            <label class="control-label">Password</label>
            <input class="form-control" type="password" name="password" ng-model="vm.password"/>
        </div>
        <div class="form-actions">
            <button type="submit" class="btn btn-success uppercase">Login</button>
        </div>
    </form>
</div>

Answer 3

我已经尝试过您的代码，假设您的控制器如下所示并且按预期工作。试一试：

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body>
<div ng-controller="LoginFactory">
    <form class="login-form" name="vm.form" ng-submit="vm.login()">
        <h3 class="form-title">Sign In</h3>

        <div class="form-group">
            <label class="control-label">E-mailaddress</label>
            <input class="form-control" type="text"
                    name="email" ng-model="vm.email"/>
        </div>
        <div class="form-group">
            <label class="control-label">Password</label>
            <input class="form-control" type="password" name="password" ng-model="vm.password"/>
        </div>
        <div class="form-actions">
            <button type="submit" class="btn btn-success uppercase">Login</button>
        </div>
    </form>
</div>
<script type="text/javascript">
    'use strict';
    angular.module('app', []).controller('LoginFactory', function LoginController($scope){
        $scope.vm={};
        $scope.vm.login=login;
        function login(){
            console.log('login');
        }
    });
</script>
</body>
</html>

AngularJS ng-submit输入密钥不起作用

修改

3 个答案: