3

サイドメニュー、ポップオーバー、およびモーダルを備えたイオンアプリがあります。

  • ページには、グリッド テーブルがあります。

  • ユーザーは行を選択して強調表示できます。

  • その後、ユーザーはポップオーバーを開いて、行を表示または編集できます。

  • 表示または編集を選択すると、モーダルが開きます。

  • モーダルでは、右上隅のキャンセル ボタンをクリックしてモーダルを閉じることができます。

  • モーダルを閉じた後、すべてのクリック、タッチ、スワイプなどはアプリによって読み取られなくなります。

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

5 に答える 5

2

ここで、モーダルを開く前にポップオーバーを閉じてタイムアウトを使用して解決しました。

    $scope.openModal = function(){
        if(!$scope.modal) return;       

        // Call a function to close the popover
        $scope.closePopover();      

        // Set a timeout to show the modal only in next cycle
        $timeout(function(){
            $scope.modal.show()
        }, 0);
    });
于 2016-11-12T09:26:39.100 に答える
0

ちょっとした遊び場の例を用意しただけで、ソリューションをそれと比較して、そこにある問題を特定できるかもしれません。

http://play.ionic.io/app/89ab5ebbb236

モーダルを表示するときにポップオーバーを積極的に非表示にしていることに注意してください。これが問題である可能性があります。アプリケーションでそれを行いましたか?

そのため、一見したところ、問題を再現できません。提供された例が役に立たない場合でも、コンソールにエラーが表示されるかどうかを知ることは興味深いでしょう.

于 2016-11-08T17:35:38.500 に答える