Question

我使用ui.boostratp＆amp; anuglar莫代尔服务

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

我尝试了多种方法，但都没有奏效。在对话框加载“模态模板已加载”后＃39;登录到控制台。虽然表单使用鼠标，但希望它适用于输入键。我如何让它适用于Enter Key？

Answer 1

我发现Key事件是在父窗体上捕获的，而不是在对话框中捕获。

所以我写了一个JavaScript来触发父窗口的点击，如下所示。

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

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

Answer 2

您可以将模式包装在表单标签中，然后使用ng-submit。请注意，您应该单独使用ng-submit，而不必使用ng-click。

另见：Angular-UI $dialog and form submit on enter key

angular modalservice不响应输入Key

2 个答案: