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

標籤：

出處： http://www.cnblogs.com/CheeseZH/ 

 

$ionicModal是完整的頁面；

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

$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也可以進行豐富的操作。）；

 1 angular.module(‘testApp‘, [‘ionic‘]) 2 .controller(‘MyController‘, function($scope, $ionicModal) { 3   $ionicModal.fromTemplateUrl(‘modal.html‘, { 4     scope: $scope, 5     animation: ‘slide-in-up‘ 6   }).then(function(modal) { 7     $scope.modal = modal; 8   }); 9   $scope.openModal = function() {10     $scope.modal.show();11   };12   $scope.closeModal = function() {13     $scope.modal.hide();14   };15   //當我們用完模型時，清除它！16   $scope.$on(‘$destroy‘, function() {17     $scope.modal.remove();18   });19   // 當隱藏模型時執行動作20   $scope.$on(‘modal.hide‘, function() {21     // 執行動作22   });23   // 當移動模型時執行動作24   $scope.$on(‘modal.removed‘, function() {25     // 執行動作26   });27 });

詳細說說建立的方法

可以使用字串或者一個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建立：

1 $ionicModal.fromTemplateUrl(‘templates/hello.html‘, {// modal視窗選項2     scope: $scope,3     animation: ‘silde-in-up‘4 }).then(function (modal) {5      $scope.modal = modal;6 })

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

1 <ion-modal-view>2     <ion-header-bar class="bar-energized">3         <h1 class="title">標題</h1>4     </ion-header-bar>5     <ion-content>6         Hello~~~~7     </ion-content>8 </ion-modal-view>

 

 

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