Как закрыть $ ionicPopup перед тем, как открыть новый?

Question

Я создаю ионическое приложение с формой и некоторыми обязательными полями.

Когда форма отправлена, и если она недействительна, я показываю предупреждающее сообщение, используя службу Ionic's ionicPopup.

Моя проблема: пользователь может нажать кнопку «ENTER» или («Перейти» в Android), чтобы вызвать отправку формы и закрыть всплывающее окно, которое вызывает открытие другого всплывающего окна.

Вы можете увидеть это здесь происходит:

Sample Code

Фокус ввод, нажмите ENTER, и когда появится сообщение об ошибке, нажмите кнопку ENTER еще раз, чтобы закрыть его. Будет открыто другое всплывающее окно (скорее всего, поскольку вкладка за фоном все еще имеет фокус или, может быть, потому, что модаль создается в форме - снова нажав ENTER).

Есть ли способ избежать такого поведения? Может быть, ВВЕДИТЕ в $ ionicPopup, чтобы закрыть его, не отправив форму еще раз, или, по крайней мере, иметь какой-либо код для закрытия любых активных всплывающих окон, прежде чем отображать новый? Поскольку при открытии нескольких всплывающих окон, если вы попробуете мышь (или коснитесь), чтобы закрыть сообщение, пользователю будет предложено закрыть все остальные диалоги перед отправкой обратно на главный экран.

Я знаю, что могу попытаться получить ссылку на всплывающее окно и вызвать метод close(), но это не совсем сработало для меня. В конце концов новое предупреждение открывается до того, как предыдущий будет полностью закрыт, и фон навсегда застрянет на экране.

Спасибо за помощь.

Answer 1

Как оказалось, моя фактическая проблема заключается в том, что $ ionicPopup не поддерживает нажатие ENTER (или «переход» на клавиатуру Android), чтобы закрыть всплывающее окно. По какой-то причине я попытался сфокусироваться на исходных данных, но это не сработало.

Для тех, у кого с той же проблемой, я закончил создание угловой директивы для закрытия клавиатуры устройства при отправке формы.

Вот код директивы:

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

Очевидно, что проблема все еще происходит при тестировании непосредственно в браузере, но работает при развертывании устройств.