我有一个离子应用程序,它有一个侧面菜单、一个弹出窗口和一个模式。
在一个页面中,有一个网格表。
用户可以选择一行来突出显示它。
然后,用户可以打开弹出窗口并查看或编辑该行。
选择视图或编辑后,将打开一个模式。
在模态中,可以点击右上角的取消按钮来关闭模态。
关闭模式后,应用程序不再读取所有点击、触摸、滑动等。
以下是 和 的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>