ionic中的$inoicModal

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中模态窗口的使用方式，仅供参考。