The Issue:
I've been unable to to accept a modal window with the ENTER key

I have modified the default Plunker to show you what I've done since now --> Here

What I have:
Briefly, the ENTER key is recognized by the modal, but it doesn't trigger my function (scope issues, I suspect).

The bad part is that I had to modifiy the template/modal/window, which I would gladly left unspoiled, if possible.

What I would love
I would love to simply put the ng-enter directive in my modal, without modifying the default template

Extra
I've also tried to add the "event 13" to the modal directive, but I couldn't pass any result in the modal.close, so I dropped that road

Any thought?

The Issue:
I've been unable to to accept a modal window with the ENTER key

I have modified the default Plunker to show you what I've done since now --> Here

What I have:
Briefly, the ENTER key is recognized by the modal, but it doesn't trigger my function (scope issues, I suspect).

The bad part is that I had to modifiy the template/modal/window, which I would gladly left unspoiled, if possible.

What I would love
I would love to simply put the ng-enter directive in my modal, without modifying the default template

Extra
I've also tried to add the "event 13" to the modal directive, but I couldn't pass any result in the modal.close, so I dropped that road

Any thought?

• javascript
• angularjs
• angular-ui
• angular-ui-bootstrap

• If you move your ng-enter directive and tab-index to the template defined in your html it works. However you must click on the div to give it focus to work. plunker – Jonathan Palumbo Commented Feb 7, 2014 at 18:24
• 2 Wrap the modal in a <form> and put an <input type="submit" ng-click="closeModal()"/>. – Cory Silva Commented Jun 16, 2014 at 3:34
• @CorySilva you should post this as the answer. The OP should also make sure that if using multiple button tags in the form that only one button should have type="submit" and the rest of the buttons should be type="button". – Sunil D. Commented Jul 1, 2014 at 2:09

3 Answers 3

Check my Plunker. You should add ng-enter to "OK" button.

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

Maybe you are looking for something more generic, I'm not sure. Then you might consider watchers. But personally I find this better since we don't have any constant watcher which listens modal event.

I have found that it is easiest just to add the enter event handler in the controller of the modal:

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;

AngularJS support this be default.

Add a <form> tag in your template (modal.html) and add ng-submit directive e.g.

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