How can I submit an angular-ui modal with keyboard - angularjs

Question

angular-ui modals (see http://angular-ui.github.io/bootstrap/ under Modal) can be default be cancelled by pressing escape. This option is configurable through the keyboard option to $modal.open().
I would also like to be able to submit such a modal by using the keyboard, for example by pressing Ctrl-Enter. (I have several different dialogs of this kind in my app. Each modal has a different controller due to different input / output requirements.)
The button specification at the end of the angular template of the example in the documentation looks like this:
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
The rest of the example can be found here: http://plnkr.co/edit/uNeRrPI8CdZFNslcQzFy?p=preview
Here's a gist for adding an extra angular directive for keyboard shortcuts to elements with ng-click directives: https://gist.github.com/mkhatib/5802718 -- is this the best solution?

Answer 1

You could listen for a key event in the ModalInstanceCtrl like this:
function onKeydown(evt) {
if (evt.ctrlKey && evt.which === 13) { // enter key
evt.preventDefault();
$scope.$apply(function () {
$scope.ok();
});
}
}
$document.on('keydown', onKeydown);
$scope.$on('$destroy', function () {
$document.off('keydown', onKeydown);
});
Example Plunker: http://plnkr.co/edit/CR0HxGzCVK2V2dAxzjX4?p=preview
Hope this helps.

Answer 2

Here is a directive working with Angular 1.3. It can be added as attribute of a form or anywhere inside a modal. Only one modal should be opened at at once.
/**
* Submit form in modal on Enter key pressed.
* Usage: <form org-submit-onenter="myModalCtrl.ok()"></form>
*
* Only one modal should be opened at at once.
*/
function orgSubmitOnenter($document) {
return {
restrict: 'A',
priority: 0,
link: function($scope, element, attr) {
if (!attr.orgSubmitOnenter) return;
function onKeydown(event) {
if (event.which === 13) { // Enter key
event.preventDefault();
$scope.$eval(attr.orgSubmitOnenter);
}
}
$document.on('keydown', onKeydown);
$scope.$on('modal.closing', function () {
$document.off('keydown', onKeydown);
});
}
}
}
angular
.module('directives')
.directive('orgSubmitOnenter', orgSubmitOnenter);