Angularjs 在ui引导模式下按enter键触发OK（确定）单击

我有一个简单的ui引导模式，模板如下：

<div class="modal-header">
    <h3 class="modal-title">{{title}}</h3>
</div>
<div class="modal-body">
    {{body}}
</div>
<div class="modal-footer">
    <button class="btn btn-default"
            ng-click="cancel()">
        Cancel
    </button>
    <button class="btn btn-primary"
            ng-click="ok()">
        OK
    </button>
</div>

<div ng-enter="ok()">
    <div class="modal-header">
        <h3 class="modal-title">{{title}}</h3>
    </div>
    <div class="modal-body">
        {{body}}
    </div>
    <div class="modal-footer">
        <button class="btn btn-default"
                ng-click="cancel()">
            Cancel
        </button>
        <button class="btn btn-primary"
                focused="true"
                ng-click="ok()">
            OK
        </button>
    </div>
</div>

{{title}}
{{body}}
取消
好啊

---

模态的默认行为是，如果我按Escape，模态将关闭。同样，如果按Enter键，我希望触发ok（）方法。我该怎么做呢？

感谢黛安娜·R，她给了我这个答案：

我可以使用ng enter指令，如下所述：

这将允许我的模态监听回车键。但焦点需要在模式中才能发挥作用。因此，我还创建了一个指令，我称之为聚焦：

angular.module('webApp').directive('focused', function ($timeout, $parse) {
    return {
        link: function ($scope, element, attributes) {
            var model = $parse(attributes.focused);
            $scope.$watch(model, function (value) {
                if (value === true) {
                    $timeout(function () {
                        element[0].focus();
                    });
                }
            });

            // set attribute value to 'false' on blur event:
            element.bind('blur', function () {
                if (model && model.assign) {
                    $scope.$apply(model.assign($scope, false));
                }
            });
        }
    };
});

然后我更新我的模态模板，使其如下所示：

<div class="modal-header">
    <h3 class="modal-title">{{title}}</h3>
</div>
<div class="modal-body">
    {{body}}
</div>
<div class="modal-footer">
    <button class="btn btn-default"
            ng-click="cancel()">
        Cancel
    </button>
    <button class="btn btn-primary"
            ng-click="ok()">
        OK
    </button>
</div>

<div ng-enter="ok()">
    <div class="modal-header">
        <h3 class="modal-title">{{title}}</h3>
    </div>
    <div class="modal-body">
        {{body}}
    </div>
    <div class="modal-footer">
        <button class="btn btn-default"
                ng-click="cancel()">
            Cancel
        </button>
        <button class="btn btn-primary"
                focused="true"
                ng-click="ok()">
            OK
        </button>
    </div>
</div>

{{title}}
{{body}}
取消
好啊

---

由于focused=“true”指令位于带有ng enter指令的包装div内，因此enter键将触发ok（）方法

如果您正在寻找更多“开箱即用”解决方案，我建议使用

它的功能要强大得多，但在这里它可以用来聚焦所需的元素。只需标记确认按钮：

 <div class="modal-footer">
    <button class="btn btn-default" ng-click="$dismiss()">
       Cancel
    </button>
    <button class="btn btn-primary" ng-click="$close()" focus-if>
       OK
    </button>
 </div>

取消
好啊

---

现在，单击

空格

或

回车

将触发OK按钮。您还可以使用

选项卡

按钮导航。

看看这个例子。它与普通的javascript enter相同，只是包装在一个指令中。很好，但是我应该在哪里添加该指令？抱歉，我错过了关于弹出提交的事实。您的问题与这些解决方案相关，但仅当模态中的某些元素被聚焦时，我才觉得有效，但事实并非如此。无论如何，您需要模态中的聚焦，以便能够点击enter并提交。很好，我可以以某种方式帮助您：）