AngularJS - ngClick 阻止提交键操作

Question

我的网站的用户应该使用我的表单中的按钮输入一个简单的代码，然后他应该点击Ok 或按回车键并继续处理。

问题是 enter 键没有提交我的表单，正在执行从ng-click 调用的其他方法。如何避免回车键调用ng-click方法？

myapp.js

var myApp = angular.module('myApp',[]);

myApp.controller('myformcontroller', ['$scope', function ($scope){
    // Procesing data from form.
    $scope.signin = function () {
    }
}]);

myApp.controller('mycontroller', ['$scope', function ($scope){
   $scope.do = function() {
       alert('ng-click pressed!');
   }
}]);

myform.html

<div ng-controller="myformcontroller">

    <form name="myForm"
          role="form" 
          ng-submit="signin()" 
          novalidate>

        <input type="text"/>

        <div ng-controller="mycontroller">
            <a href="javascript:void(0);" ng-click="do()">
                clickme!
            </a>
        </div>

        <button type="submit">Ok</button>
    </form>

</div>

按click me 并在My Fiddle 之后按enter 键

Answer 1

您可以使用 jquery 省略 html 规则。 首先将 id 添加到表单和按钮：

<form id="mydiv" name="myForm"
    role="form" 
    ng-submit="signin()" 
    novalidate>

    <div ng-controller="mycontroller">
       <a href="javascript:void(0);" ng-click="do()">
          <img src="img/a-letter.png" alt="">
        </a>
    </div>

    <button id="mydiv2" type="submit">Ok</button>
</form>

然后在输入时设置监听器：

$("#mydiv").keyup(function(event){
if(event.keyCode == 13){
    $("#mydiv2").click();
}
});

所以它并不优雅，但您可以通过模拟点击输入来提交表单。

Answer 2

它没有阻塞。您缺少标准输入来冒泡正确处理的点击事件。如果没有输入，则默认不提交表单。这不是角度问题。看这里https://stackoverflow.com/a/477699/4573999

编辑
更详细的解释基于 cmets。问题不在于提交元素。当然，您有一个按钮类型的提交。对于表单内的其他元素，有一个默认行为。对于input 元素，enter 键上的默认值是提交被它包围的表单。但对于锚标签它不是。因为它不应该提供任何数据。为什么要在链接上提交表单？因此，在您的情况下，您应该通过调用适当的方法以编程方式提交表单。

myApp.controller('myformcontroller', ['$scope', function ($scope){
    $scope.signin = function () {
               alert('submit!');
    }
}]);

myApp.controller('mycontroller', ['$scope', function ($scope){
   $scope.do = function() {
       alert('ng-click pressed!');
       $scope.signin();
   }
}]);

检查更新fiddle
如果您想以通用方式获取此信息，可以解析 ng-submit 值，如此处 How to programmatically submit a form with AngularJS