【问题标题】: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>

【问题讨论】:

    标签: ionic-framework ionic-popover


    【解决方案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()”函数

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 2020-11-13
          • 2017-05-23
          • 2016-03-30
          • 1970-01-01
          • 1970-01-01
          • 2021-03-25
          • 1970-01-01
          相关资源
          最近更新 更多