离子应用程序在弹出框和模式关闭后冻结或停止工作

Posted 2023-02-23

【中文标题】离子应用程序在弹出框和模式关闭后冻结或停止工作

【英文标题】：Ionic app freezes or stops working after popover and modal closes

【发布时间】：2016-11-08 16:18:01

【问题描述】：

我有一个具有侧边菜单、弹出窗口和模式的 ionic 应用程序。

在一个页面中，有一个网格表。

用户可以选择一行来突出显示它。

然后用户可以打开弹出窗口并查看或编辑该行。

选择视图或编辑后，将打开一个模式。

在modal中，右上角的取消按钮可以 单击以关闭模式。

关闭modal后，所有的点击、触摸、滑动等都没有 不再由应用读取。

这里是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>

【参考方案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);
    );

【讨论】：

令人讨厌的是，如此基本的东西需要一种解决方法，但这很有效。谢谢。

【参考方案2】：

这个问题似乎已经是一个已知的错误，并且已经在离子问题跟踪器中列出：

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

我想我会在上面的链接中等待它的回答。

【参考方案3】：

刚刚准备了一个小操场示例，也许您可​​以将您的解决方案与它进行比较以找出问题所在。

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

请注意，我在显示模式时主动隐藏了弹出框 - 这可能是问题所在，您是否在您的应用程序中这样做了？

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

【讨论】：

我在问题中添加了popover和modal的HTML代码，它可能有助于再次检查。谢谢

【参考方案4】：

这应该很有帮助。

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

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

【参考方案5】：

我在 ionic 2 应用程序中遇到了类似的问题。我通过使用“this.navCtrl.pop()”来关闭使用“dismiss()”函数的模式来解决它。

注意：不要在关闭模态框后立即使用“this.setRoot()”函数