ionic中的模態窗口

在ionic中，除了常規的彈窗【$ionicPopup】還提供了浮動窗口【$ionicPopover】

其次在ionic中，還有一種新的彈窗，這樣的彈窗，會占據整個頁面，成為模態窗口，模態窗口可以通過$ionicModal服務來進行創建、顯示、隱藏、移除等功能。

模態窗口，為了加載方便，通常會在頁面中的script標簽中進行添加，如下

<script type="text/ng-template" id="modal">
    <!-- 此處是添加HTML模板內容的地方 -->
   <div class="modal">
          <ion-header-bar>
                    <h1 class="title">模態窗口標題</h1>
          </ion-header-bar>
          <ion-content>
                <!-- 模態窗口中顯示的內容 -->
          </ion-content>
    </div>
</script>

在Angular的控制器中，就可以初始化這個模態窗口，并且定義函數來進行顯示、隱藏、刪除的控制

var app = angular.module("myApp", ["ionic"]);
app.controller("myCtrl", function($scope, $ionicModal) {
    // 初始化窗口
    $ionicModal.fromTemplateUrl("modal", {
      scope:$scope,
      animation:"slide-in-up"
    }).then(function(modal) {
        $scope.dialog = modal;
    });

     // 顯示模態窗口的函數
      $scope.openModal = function() {
          $scope.dialog.show();
      }
      // 隱藏模態窗口的函數
      $scope.hideModal = function() {
        $scope.dialog.hide();
      }
      // 刪除模態窗口的函數：慎重使用，一旦刪除，這個窗口將不可用
      $scope.removeModal  = function() {
          $scope.dialog.remove();
      }
});

在HTML頁面中，就可以直接調用了

<ion-header-bar>
    <button class="button button-clear" ng-click="openModal()">顯示模態窗口</button>
    <h1 class="title">頁頭標題</h1>
</ion-header-bar>

以上是關于ionic中模態窗口的使用方式，僅供參考。