AngularJS - 使用ENTER键接受ui.bootstrap模式

时间:2014-02-07 16:52:30

标签: javascript angularjs angular-ui angular-ui-bootstrap

问题:
我一直无法用ENTER键接受模态窗口

我修改了默认的Plunker,以显示我从现在开始做的事情 - > Here

我有什么:
简而言之,输入键被模态识别,但它不会触发我的功能(范围问题,我怀疑)。

不好的部分是我必须修改template/modal/window,如果可能的话,我很乐意保留未被破坏的。{/ p>

我想要的是什么
我很乐意简单地将ng-enter指令放在我的模态中,而不修改默认模板

附加
我还尝试将“事件13”添加到modal指令中,但我无法在modal.close中传递任何结果,所以我放弃了这条道路

有什么想法吗?

3 个答案:

答案 0 :(得分:4)

检查我的Plunker。您应该将ng-enter添加到" OK"按钮。

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

也许你正在寻找更通用的东西,我不确定。然后你可能会考虑观察者。但我个人觉得这个更好,因为我们没有任何一个持续监听模态事件的观察者。

答案 1 :(得分:4)

我发现在模态的控制器中添加enter事件处理程序是最简单的:

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;

答案 2 :(得分:4)

AngularJS支持这是默认值。

在模板中添加app.run(threaded=True)标记(modal.html)并添加<form>指令 e.g。

ng-submit