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

Question

What solution would you implement for an Angular "form", where you wanted it to submit on an enter key press, but you can't rearrange the elements to fit in a <form> element. For instance something like this:

<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>

I want the user to be able to hit enter while the focus is on any of these elements(Not just the true form elements), and have the form submit(validation passing of course). The solution should be purely Angualr(if possible). I'd rather it didn't use complex CSS positioning, I don't want to have to rearrange and muddle the html structure.

I saw a solution online for a custom "ngEnter" type directive that I thought had promise but I don't think everyone on the team is gonna like that solution. I'd like to know how else one might approach this.

Answer 1

See this article for more info .

Here's a snippet showing how to conditionally log to the console using 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>