如何在打开新 $ionicPopup 之前关闭 $ionicPopup？

Question

我正在创建一个带有表单和一些必填字段的 Ionic 应用程序。

提交表单后，如果它无效，我会使用 Ionic 的 $ionicPopup 服务显示一条警告消息。

我的问题是：用户可以按 "ENTER" 或（Android 中的 "Go" 按钮）来调用表单提交并关闭弹出窗口，这会导致另一个弹出窗口打开。

您可以在此处看到发生的情况：

选中输入，按回车，当显示错误信息时，再次按回车关闭。将打开另一个弹出窗口（很可能是因为背景后面的输入仍然具有焦点，或者可能是因为模态是在表单中创建的 - 让 ENTER 再次调用提交）。

有什么办法可以避免这种行为吗？也许 $ionicPopup 中的 ENTER 可以关闭它而不再次提交表单，或者至少有一些代码可以在显示新弹出窗口之前关闭任何活动的弹出窗口？因为当您打开多个弹出窗口时，如果您尝试使用鼠标（或点击）关闭一条消息，系统会提示用户关闭所有其他对话框，然后再返回主屏幕。

我知道我可以尝试获取对弹出窗口的引用并调用 close() 方法，但它对我来说不太适用。最终，新警报在前一个警报完全关闭之前打开，并且背景永远停留在屏幕上。

感谢您的帮助。

Answer 1

事实证明，我的实际问题是 $ionicPopup 不支持按 ENTER（或 Android 键盘上的 "go"）来关闭弹出窗口。出于某种原因，我试图将焦点从输入中移开，但没有成功。

对于遇到相同问题的任何人，我最终创建了一个 angular 指令以在提交表单时关闭设备键盘。

指令代码如下：

(function () {
    'use strict';

    angular
        .module('myModule')
        .directive('closeKeyboardOnSubmit', closeKeyboardOnSubmit);

    closeKeyboardOnSubmit.$inject = ['$ionicPlatform', '$cordovaKeyboard'];

    function closeKeyboardOnSubmit($ionicPlatform, $cordovaKeyboard) {

        var directive = {
            require: '^form',
            restrict: 'A',
            link: link
        };

        return directive;

        function link (scope, element) {
            element.on("submit", function(){
                $ionicPlatform.ready(function(){
                    $cordovaKeyboard.close();
                }); 
            });
        }
    }

})();

然后我像这样在表单标签上使用它：

<form close-keyboard-on-submit ...>

显然，直接在浏览器上测试时问题仍然存在，但在部署到设备时会出现问题。

如何在打开新 $ionicPopup 之前关闭 $ionicPopup？

How do I close an $ionicPopup before opening a new one?

angularjs

ionic-framework

ionic-popup