Question

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

Answer 1

您可以在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

希望这有帮助。

Answer 2

这是一个使用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);

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

2 个答案: