javascript - 为什么 ionic 模式在关闭或提交时会卡住 UI？

Question

我有一个弹出窗口，其中有两个选项 - 添加收藏夹和添加评论-，第一个选项工作正常:它不会卡住用户界面；但是第二个表单一旦被省略或提交就会卡住界面。这是正在发生的事情:

请注意当我关闭表单时界面没有响应。

这是我用来创建弹出框和模态框的代码:

$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();
});

希望对您有所帮助。