带有按钮的提交，仅在Angular表单外部输入

Question

您想为Angular“表单”实现什么解决方案，您希望在其中按Enter键提交，但是您不能重新排列元素以适合<form>元素。 例如这样的事情：

<div>
    <input/>
    <input/>

    //This might act as a kind of custom built select
    <ul>
        <li></li>
    </ul>

    <form></form> //Dropzone form for instance.

    <button type="submit" ng-click="submitFunction()">Submit</button>
</div>

我希望用户能够在焦点位于任何这些元素（不仅是真正的表单元素）上时按Enter键，并具有表单Submit（当然是通过验证）。 解决方案应该纯粹是Angualr（如果可能）。 我宁愿它不使用复杂的CSS定位，也不想重新排列和弄乱html结构。

我在网上看到了一个自定义“ ngEnter”类型指令的解决方案，该指令我认为已经实现，但我认为团队中的每个人都不会喜欢该解决方案。 我想知道还有其他方法可以做到这一点。

Answer 1

有关更多信息，请参见本文 。

这是显示如何使用ng-keypress有条件地登录到控制台的代码段：

 angular.module('myExample', []) .controller('myController', ['$scope', function($scope) { $scope.myFunction = function() { console.log('hi!'); } }]); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myExample"> <div ng-controller="myController"> <input placeholder="type something" ng-keypress="$event.which === 13 && myFunction()"> </div> </div>