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

刚刚准备了一个小游乐场的例子，也许你可以将你的解决方案与它进行比较，以确定那里的问题。

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

请注意，在显示模态时我会主动隐藏弹出窗口 - 可能这是问题，您是否已在应用程序中完成此操作？

乍一看，我无法重现这个问题。如果提供的示例对您没有帮助，那么知道您是否在控制台中出现任何错误会很有趣。

Answer 4

这应该会有所帮助。

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

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

Answer 5

我在离子2应用中遇到了类似的问题。我通过使用“this.navCtrl.pop（）”来解决它，以关闭使用“dismiss（）”函数的模态。

注意：关闭模态后不要立即使用“this.setRoot（）”函数

在弹出窗口和模态关闭后，离子应用程序冻结或停止工作

5 个答案: