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

mitkmikd  于 2022-12-09  发布在  Ionic
关注(0)|答案(2)|浏览(117)

我有一个弹出窗口,其中两个选项-添加收藏夹和添加评论-,第一个选项是正确的工作:它不会冻结用户界面;但是一旦表单被省略或提交,第二个命令就会冻结界面。

请注意,当我关闭表单时,界面没有回应。
这是我用来创建弹出窗口和模态的代码:

$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>

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

有什么建议或想法...来解决这个问题吗?

sdnqo3pr

sdnqo3pr1#

屏幕冻结的原因是,尽管在打开模态之前关闭了弹出窗口,但body标记仍然包含类“popover-open”。一个快速的解决方案(但不是最简洁的)是在关闭模态时再次关闭弹出窗口。这样,离子框架将从body标记中删除类“popover-open”。示例:

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

希望能有所帮助。

ghhaqwfi

ghhaqwfi2#

我也遇到了同样的问题,但不知道为什么会发生这种情况。阅读关于ionicPopover的Ionic文档时,我发现.hide()方法实际上返回了一个承诺,一旦弹出窗口被动画化,这个承诺就会得到解决。所以,你实际上可以做的是如下设置你的closePopover()方法:

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

关于点击“添加评论”选项时执行的方法,可以如下实现:

$scope.addComment = function addComment() {
    $scope.closePopover()
      .then(function() {
        $scope.openAddCommentModal();
      });
};

这将确保只有当弹出窗口完全动画化并且那些类从body标签中删除时才显示模态。这将清除脏状态并使应用做出响应。

相关问题