为什么离子模态在关闭或提交时会冻结UI？

Question

我有一个popover,有两个选项 - 添加收藏夹和添加注释 - ,第一个选项正常工作:它不会冻结用户界面; 但是第二个一旦表单被省略或提交冻结界面.这就是发生的事情:

注意当我关闭表单时接口没有响应.

这是我用来创建popover和modal的代码:

$ionicPopover.fromTemplateUrl('templates/dish-detail-popover.html',{
scope: $scope}) 
.then(function(popover){
    $scope.popover = popover;
});

$scope.openPopover = function($event){
    $scope.popover.show($event);
}

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

$ionicModal.fromTemplateUrl('templates/dish-comment.html', {
    scope: $scope
}).then(function(modal) {
    $scope.commentModal = modal;
});

// Triggered in the reserve modal to close it
$scope.closeAddComment = function() {
    $scope.commentModal.hide();
};

// Open the reserve modal
$scope.showCommentModal = function($event) {
    $scope.closePopover();
    $scope.commentModal.show($event);
};

模板dish-detail-popover.html:

<ion-popover-view>
    <ion-content>
      <div class="list">
        <a class="item" ng-click="addFavorite(dish.id)">
          Add to favorites
        </a>
        <a class="item" ng-click="showCommentModal()">
          Add Comment
        </a>
      </div>
    </ion-content>
</ion-popover-view>

和模板dish-comment.html:

<ion-modal-view>
  <ion-header-bar>
    <h1 class="title">Submit Comment on Dish</h1>
    <div class="buttons">
      <button class="button button-clear" ng-click="closeAddComment()">Close</button>
    </div>
  </ion-header-bar>
  <ion-content>
    <form id="comentDishForm" name="comentDishForm" ng-submit="doComment()">
      <div class="list">
        <label class="item item-input item-select">
          <span class="input-label">Rating</span>
            <select ng-model="comment.rating">
                <option ng-repeat="n in [1,2,3,4,5]" value="{{n}}">{{n}}</option>
            </select>
        </label>
        <label class="item item-input">
          <span class="input-label">Your Name</span>
          <input type="text" ng-model="comment.author">
        </label>
        <label class="item item-input">
          <span class="input-label">Your Comment</span>
          <input type="text" ng-model="comment.comment">
        </label>
        <label class="item">
          <button class="button button-block button-positive" type="submit">Submit</button>
        </label>
      </div>
    </form>
  </ion-content>
</ion-modal-view>

注意:从添加注释按钮(绿色)按钮调用表单时,它可以正常工作.从弹出窗口调用时失败是相关的.

一些建议或想法......解决这个问题？

Answer 1

屏幕被冻结，因为尽管在打开模式之前关闭了弹出窗口，但 body 标签仍然带有“popover-open”类的脏污。一个快速的解决方案（但不是最巧妙的）是在关闭模式时再次关闭弹出窗口。这样，ionic 框架将从 body 标记中删除“popover-open”类。例子：

$scope.$on('modal.hidden', function() {
    $scope.closePopover();
});

希望能帮助到你。