如何使用键盘提交angular-ui模态

时间:2014-08-20 16:14:01

标签: angularjs angular-ui angular-ui-bootstrap

按下escape,可以默认取消

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 - 这是最佳解决方案吗?

2 个答案:

答案 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);