AngularJS - принять ui.bootstrap modal с клавишей ENTER

Проблема:
Мне не удалось принять модальное окно с клавишей ENTER

Я изменил стандартный Plunker, чтобы показать вам, что я сделал с тех пор → Здесь

Что у меня:
Вкратце, клавиша ENTER распознается модальной, но она не вызывает мою функцию (проблемы с областью, я подозреваю).

Плохая часть заключается в том, что мне пришлось модифицировать template/modal/window, который я бы с удовольствием оставил неиспорченным, если это возможно.

Что бы я хотел
Мне бы очень хотелось просто поместить директиву ng-enter в мой модальный, не изменяя шаблон по умолчанию

Extra
Я также попытался добавить "событие 13" в директиву modal, но я не смог передать какой-либо результат в modal.close, поэтому я уронил эту дорогу

Любая мысль?

Ответы

Ответ 1

Я обнаружил, что проще всего добавить обработчик события ввода в контроллер модального режима:

var text = "This is the text in the modal";
var modalPromise = $modal.open({
    template:
    '<div class="modal-body">' +
    '<button class="close" ng-click="$dismiss(\'×\')">×</button>'+
    '<h3 ng-bind="body"></h3>'+
    '</div>'+
    '<div class="modal-footer">'+
    '<button class="btn btn-primary" ng-click="$close(\'ok\')">OK</button>'+
    '<button class="btn btn-warning" ng-click="$dismiss(\'cancel\')">Cancel</button>'+
    '</div>',
    controller: function ($scope, $document) {
        $scope.body = text;

        var EVENT_TYPES = "keydown keypress"
        function eventHandler(event) {
            if (event.which === 13) {
                $scope.$close('ok');
            }
        }
        $document.bind(EVENT_TYPES, eventHandler);
        $scope.$on('$destroy', function () {
            $document.unbind(EVENT_TYPES, eventHandler);
        })
    }
}).result;

Ответ 2

Поддержка AngularJS по умолчанию.

Добавьте тег <form> в свой шаблон (modal.html) и добавьте директиву ng-submit например.

<form name="questionForm" ng-submit="ok()">
  <div class="modal-header">
    <h3 class="modal-title">{{title}}</h3>
  </div>
  // the rest of the code here
</form>

Ответ 3

Проверьте мой Plunker. Вы должны добавить ng-enter в кнопку "ОК".

<button class="btn btn-primary" ng-enter="ok();" ng-click="ok()">OK</button>

Возможно, вы ищете нечто более общее, я не уверен. Тогда вы можете рассмотреть наблюдателей. Но лично я считаю это лучше, поскольку у нас нет постоянного наблюдателя, который слушает модальное событие.