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

Question

可以默认按angular-ui模态（参见Modal下的http://angular-ui.github.io/bootstrap/ ），方法是按逃逸键。 该选项可通过keyboard选项$modal.open() 。

我还希望能够通过使用键盘（例如，按Ctrl-Enter 提交这种模式。 （我的应用程序中有几种不同的此类对话框。由于不同的输入/输出要求，每个模式都有不同的控制器。）

文档中示例的角度模板末尾的按钮规范如下所示：

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

该示例的其余部分可以在这里找到： http : //plnkr.co/edit/uNeRrPI8CdZFNslcQzFy?p=preview

这是为带有ng-click指令的元素的键盘快捷键添加额外的角度指令的要点： 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);