ZH奶酪：Ionic中（彈出式窗口）的$ionicModal使用方法

Ionic中[彈出式窗口]有兩種（如下圖所示），$ionicModal和$ionicPopup;

$ionicModal是完整的頁面；

$ionicPopup是(Dialog)對話框樣式的，直接用JavaScript設定對話框的一些參數，通常用於通知消息、確認等作用；

 

本文主要介紹IonicModal的使用方法

中文文檔：http://ionicframework.net/docs/api/service/$ionicModal/

英文文檔：http://ionicframework.com/docs/api/service/$ionicModal/

$ionicModal（中文翻譯為‘模型’，感覺還是直接稱為用Modal好一點。）

模型是一個內容面板，可以臨時越過用戶的主視圖。通常用於選擇或編輯一個項。注意，你需要把模型的內容放入一個帶有modal類的div內。

舉個例子，啥是Modal？：

登錄或者注冊頁面的用戶協議（圖1），點擊“用戶協議”之后，會彈出用戶協議具體內容（圖2），這個地方就可以使用Modal來實現。圖3中展示了Application運行起來之后，登錄頁面的源代碼（這些都是ionic自己生成的），忽略其他信息，只看我標出來的紅色1和紅色2，當前紅色2的元素是hide，當我們點擊“用戶協議”之后，紅色2就會從“hide”變成“actived”，這時候我們就看到了圖2的內容了。

圖1 登錄界面用戶協議

圖2 用戶協議具體內容（Modal）

圖3 查看網頁源代碼

如何實現Modal？

首先要有自己Modal的html代碼，注意，你需要把模型的內容放入一個帶有modal類的div內。：

<script id="my-modal.html" type="text/ng-template">
  <div class="modal">
    <ion-header-bar>
      <h1 class="title">我的模型標題</h1>
    </ion-header-bar>
    <ion-content>
      Hello!
    </ion-content>
  </div>
</script>

然后寫自己的js代碼（其實就是AngularJS代碼）

這部分需要注意以下幾點：

（1）不要忘了function的參數$ionicModal，否則會報錯（用瀏覽器的調試工具F12可以看到）

（2）使用fromTemplateUrl將HTML代碼中script（根據id）在HTML頁面生成自己的Modal（也就是說，在打開頁面的時候，是沒有圖3中的紅色2 div的，當調用了fromTemplateUrl之后，才會生成這個div，而且每調用一次就會生成一個紅色2 div哦，所以寫代碼的時候要把邏輯設計好，注意及時remove()。）；

（3）openModal和closeModal函數很容易理解，這個估計是Modal最常用的方法；

（4）可以通過$scope.$on來進行更豐富的操作（當然，不用$scope.$on也可以進行豐富的操作。）；

angular.module('testApp', ['ionic'])
.controller('MyController', function($scope, $ionicModal) {
  $ionicModal.fromTemplateUrl('modal.html', {
    scope: $scope,
    animation: 'slide-in-up'
  }).then(function(modal) {
    $scope.modal = modal;
  });
  $scope.openModal = function() {
    $scope.modal.show();
  };
  $scope.closeModal = function() {
    $scope.modal.hide();
  };
  //當我們用完模型時，清除它！
  $scope.$on('$destroy', function() {
    $scope.modal.remove();
  });
  // 當隱藏模型時執行動作
  $scope.$on('modal.hide', function() {
    // 執行動作
  });
  // 當移動模型時執行動作
  $scope.$on('modal.removed', function() {
    // 執行動作
  });
});

詳細說說創建的方法

可以使用字符串或者一個URL：

fromTemplate(templateString, options)

templateString  是字符串類型，存儲的是模型的內容；

options是一個對象，存儲的是ionicModal#initialize方法的選項；

返回一個Modal控制器實例；

一個options對象具有一下屬性：

• {object=} 范圍 子類的范圍。默認：創建一個$rootScope子類。
• {string=} 動畫 帶有顯示或隱藏的動畫。默認：'slide-in-up'
• {boolean=} 第一個輸入框獲取焦點 當顯示時，模型的第一個輸入元素是否自動獲取焦點。默認：false。
• {boolean=}backdropClickToClose` 點擊背景時是否關閉模型。默認：true。

fromTemplateUrl(templateUrl, options)

templateUrl 是字符串類型，指向待加載模版的URL；

options與上邊的一樣；

返回一個promise對象，指向一個Modal控制器實例；

 更直觀一點的使用url創建：

$ionicModal.fromTemplateUrl('templates/hello.html', {// modal窗口選項
    scope: $scope,
    animation: 'silde-in-up'
}).then(function (modal) {
     $scope.modal = modal;
})

templates目錄下hello.html內容如下：

<ion-modal-view>
    <ion-header-bar class="bar-energized">
        <h1 class="title">標題</h1>
    </ion-header-bar>
    <ion-content>
        Hello~~~~
    </ion-content>
</ion-modal-view>

參考鏈接（這篇文章寫的內容比較多，初學者不容易看懂）：http://hybridap.blogspot.sg/2015/04/hybrid-apps52ionicmodal.html