angular-ui模态(参见模态下的http://angular-ui.github.io/bootstrap/)。此选项可通过keyboard
的{{1}}选项进行配置。
我还希望能够使用键盘提交这样的模式,例如按$modal.open()
。 (我的应用程序中有几种不同的对话框。由于输入/输出要求不同,每种模式都有不同的控制器。)
文档中示例的角度模板末尾的按钮规范如下所示:
Ctrl-Enter
可以在此处找到示例的其余部分:http://plnkr.co/edit/uNeRrPI8CdZFNslcQzFy?p=preview
以下是为 <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>
指令向元素添加键盘快捷键的额外角度指令的要点:https://gist.github.com/mkhatib/5802718 - 这是最佳解决方案吗?
答案 0 :(得分:4)
您可以在ModalInstanceCtrl
中收听关键事件,如下所示:
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);
});
示例Plunker: http://plnkr.co/edit/CR0HxGzCVK2V2dAxzjX4?p=preview
希望这有帮助。
答案 1 :(得分:1)
这是一个使用Angular 1.3的指令。它可以作为表单的属性或模态内的任何位置添加。一次只能打开一个模态。
/**
* 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);