我有一个离子应用程序，有一个侧菜单，一个弹出窗口，和一个模态。

• 在页面中，有一个网格表。
• 用户可以选择一行以将其突出显示。
• 然后，用户可以打开弹出窗口，并查看或编辑该行。
• 选择查看或编辑后，将打开模态。
• 在模态中，可以单击右上角的取消按钮关闭模态。
• 关闭模态后，应用程序不再读取所有点击、触摸、滑动等操作。

下面是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>