0

我有以下使用 ui.boostratp & anuglar modal 服务的模态对话框

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

我尝试了多种方法，但都没有奏效。对话框加载后，“加载的模式模板”将记录到控制台。该表单虽然使用鼠标工作，但希望它适用于输入键。我如何让它为 Enter Key 工作？

4

2 回答 2

2

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

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

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

                if (e.keyCode == 13)
                    $("#ModalOKButton").trigger("click");
            };
于 2015-04-17T20:20:03.313 回答
0

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

另请参阅：Angular-UI $dialog and form submit on enter key

于 2015-04-16T21:12:37.653 回答