Приложение Ionic зависает или перестает работать после закрытия поповера и модального закрытия

Question

У меня есть ионное приложение, которое имеет боковое меню, всплывающее окно и модальное.

• На странице есть таблица сетки.

• Пользователь может выбрать строку, чтобы выделить ее.

• Затем пользователь может открыть всплывающее окно и либо просмотреть, либо изменить строку.

• После выбора просмотра или редактирования откроется модальное окно.

• В модальном режиме можно нажать кнопку отмены в верхнем правом углу, чтобы закрыть модальное окно.

• После закрытия модального режима все нажатия, касания, пролистывания и т. Д. Больше не считываются приложением.

Вот коды для popover, а также modal,

JS

// MODAL
$ionicModal.fromTemplateUrl('templates/modals/view-product.html', {
  scope: $scope,
  animation: 'slide-in-up'
})
.then(function(modal) {
      $scope.viewModal = modal;
  });

  $scope.openModal = function(modal) {
    $scope[modal].show();
  };
  $scope.closeModal = function(modal) {
    $scope[modal].hide();
  };


// POPOVER
  $ionicPopover.fromTemplateUrl('templates/popovers/list.popover.html', {
      scope: $scope,
  }).then(function (popover) {
      $scope.popover = popover;
  });

HTML

<!-- POP OVER -->
<ion-popover-view class="fit">
    <ion-content>
        <div class="list">
            <a class="item" ng-click="viewProduct(this); popover.hide()" ng-bind="lblView"></a>
            <a class="item" ng-click="editProduct(this); popover.hide()" ng-bind="lblEdit"></a>
        </div>
    </ion-content>
</ion-popover-view>

<!-- MODAL -->
<ion-modal-view>
    <ion-header-bar class="bar bar-header bar-positive">
        <h1 class="title">Viewing Product</h1>
        <button class="button button-clear button-primary" ng-click="closeModal('viewModal')">Cancel</button>
    </ion-header-bar>
    <ion-content class="padding">
        <div class="list">
           <!-- list here -->
        </div>
    </ion-content>
</ion-modal-view>

Answer 1

Здесь я решил, закрывая поповер и используя тайм-аут перед открытием модального

    $scope.openModal = function(){
        if(!$scope.modal) return;       

        // Call a function to close the popover
        $scope.closePopover();      

        // Set a timeout to show the modal only in next cycle
        $timeout(function(){
            $scope.modal.show()
        }, 0);
    });

Answer 2

Похоже, что эта проблема уже известна и уже указана в трекере ионных проблем:

https://github.com/driftyco/ionic/issues/8582

Полагаю, я просто подожду ответа на ссылку выше.

Answer 3

У меня была похожая проблема в моем приложении 2. Я решил это с помощью "this.navCtrl.pop()", чтобы закрыть модальный режим с использованием функции "dismiss()".

Примечание: не используйте функцию this.setRoot() сразу после закрытия модального

Answer 4

Это должно быть полезно.

$scope.closePopover = function () {
  $scope.popover.hide();
};

$scope.closeModal = function() {
  $scope.closePopover();
  $scope.Modal.hide();
};

Answer 5

Быстрое решение этой проблемы — простой класс CSS, не требующий никаких обходных путей JS.

В вашем пользовательском файле css

      .modal-open{ pointer-events: all ; }
.popover-open { pointer-events: all ; }

Это исправление не переопределяет поведение модального окна или всплывающего окна, когдаbackdropClickToClose:falseтоже установлен. Окружающая область по-прежнему не кликабельна.

Answer 6

Просто подготовили небольшой пример игровой площадки, может быть, вы могли бы сравнить свое решение с ним, чтобы определить, в чем здесь проблема.

http://play.ionic.io/app/89ab5ebbb236

Обратите внимание, что я активно скрываю всплывающее окно при показе модального режима - может ли это быть проблемой, вы сделали это в своем приложении?

Так что на первый взгляд я не могу воспроизвести проблему. Если приведенный пример вам не поможет, было бы интересно узнать, есть ли какие-либо ошибки в консоли.