CODEWITHSUNDEEP
angularjsui.bootstrap
user3799325
user3799325

Reputation: 610

angular modalservice does not respond to enter Key

I have the following Modal dialog using ui.boostratp & anuglar modal service

<div id="modalDialog" class="modal-dialog">
    <div class="modal-header">
        <h2 style="text-align: center">{{modalOptions.headerText}}</h2>
    </div>
    <div class="modal-body">
        <p>{{modalOptions.bodyText}}</p>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn" data-ng-click="modalOptions.close()">{{modalOptions.closeButtonText}}</button>
        <button type="button" id="OK" class="btn btn-danger" ng-enter="modalOptions.ok();" autofocus data-ng-click="modalOptions.ok();" data-ng-keyup="$event.keycode == 13 && modaloptions.ok()">{{modalOptions.actionButtonText}}</button>
    </div>
</div>
<script type="text/javascript">
       $(document).ready(function () {
           console.log('Modal Template Loaded');
           $('#OK').focus();

           $("#modalDialog").keydown(function (event) {
               console.log("Event mapped")
               if (event.keyCode == 13) {
                   $(this).parent()
                          .find("button:eq(0)").trigger("click");
                   return false;
               }
           });

       }); //document

</script>

I tried out multiple ways, but none of it worked. after the dialog box loads the 'Modal Template Loaded' is logged to console. the form works using Mouse though, but want it to work for enter key. how do i get it working for Enter Key ?

Upvotes: 0

Views: 804

Answers (2)

user3799325
user3799325

Reputation: 610

I figured out that the Key event were being captured on the Parent form and not in the dialog box.

So i wrote a JavaScript to trigger click from parent window like shown below.

document.onkeypress = function (e) {
                console.log("key Press " + e.keyCode);

                if (e.keyCode == 13)
                    $("#ModalOKButton").trigger("click");
            };

Upvotes: 2

chinaowl
chinaowl

Reputation: 532

You can wrap the modal in form tags and then use ng-submit. Note that you should use ng-submit on its own, without ng-click.

Also see this: Angular-UI $dialog and form submit on enter key

Upvotes: 0

Related Questions