我有一个弹出窗口,其中两个选项-添加收藏夹和添加评论-,第一个选项是正确的工作:它不会冻结用户界面;但是一旦表单被省略或提交,第二个命令就会冻结界面。
请注意,当我关闭表单时,界面没有回应。
这是我用来创建弹出窗口和模态的代码:
$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>
注意:当从“添加注解”按钮(绿色按钮)调用表单时,它可以正常工作。当从弹出窗口调用它时,失败是相关的。
有什么建议或想法...来解决这个问题吗?
2条答案
按热度按时间sdnqo3pr1#
屏幕冻结的原因是,尽管在打开模态之前关闭了弹出窗口,但body标记仍然包含类“popover-open”。一个快速的解决方案(但不是最简洁的)是在关闭模态时再次关闭弹出窗口。这样,离子框架将从body标记中删除类“popover-open”。示例:
希望能有所帮助。
ghhaqwfi2#
我也遇到了同样的问题,但不知道为什么会发生这种情况。阅读关于
ionicPopover
的Ionic文档时,我发现.hide()
方法实际上返回了一个承诺,一旦弹出窗口被动画化,这个承诺就会得到解决。所以,你实际上可以做的是如下设置你的closePopover()
方法:关于点击“添加评论”选项时执行的方法,可以如下实现:
这将确保只有当弹出窗口完全动画化并且那些类从
body
标签中删除时才显示模态。这将清除脏状态并使应用做出响应。