模態窗口的結構
在Ionic中，模態窗口通過$ionicModal提供。他易於使用且非常強大，詳細信息請參考$ionicModal文檔。Ionic中的模態窗口可以使用模板字符串或URL創建。本文將使用URL。
模態窗口創建時綁定到一個scope，這個scope可以用來傳遞數據。然而，在更復雜的情況下，通過服務來訪問共享數據是最好的做法。
製作模態窗口的標記
創建模態窗口非常簡單。首先，讓我們來創建我們的用戶界面。這個小例子將會展示一條聯繫人信息，點擊後允許對它進行編輯。
<ion-header-bar class="bar-energized"> <h1 class="title">Contact Info</h1> </ion-header-bar> <ion-content> <div class="card" ng-controller='MainCtrl' ng-click="openModal()"> <div class="item item-divider"> `contact`.`name` </div> <div class="item item-text-wrap"> `contact`.`info` </div> </div> </ion-content>
現在，看起來還沒有什麼特別的，唯一與模態窗口相關的是一個scope函數：openModal()。還缺少我們的modal部分。直接在當前標記中添加它。
<script id="contact-modal.html" type="text/ng-template"> <div class="modal"> <ion-header-bar> <h1 class="title">Edit Contact</h1> </ion-header-bar> <ion-content> <div class="list"> <label class="item item-input"> <span class="input-label">Name</span> <input type="text" ng-model="contact.name"> </label> <label class="item item-input"> <span class="input-label">Info</span> <input type="text" ng-model="contact.info"> </label> </div> <button class="button button-full button-energized" ng-click="closeModal()">Done</button> </ion-content> </div> </script>
在生產環境中，你可能想把模板標記放入獨立文件中或把它們添加到模板緩存中。與Ionic中其他使用模板的部分一樣，Angular將先從模板緩存中搜索需要的文件。
顯示模態窗口
模態窗口的控制器代碼非常簡單。確保在控制器中注入依賴項$ionicModal。
app.controller('MainCtrl', function($scope, $ionicModal) {
$scope.contact = {
name: 'Mittens Cat',
info: 'Tap anywhere on the card to open the modal'
}
$ionicModal.fromTemplateUrl('contact-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();
});
})Ionic的模態窗口使用了一個異步deferred。這樣可以異步訪問模板緩存和構建模態窗口。我們可以爲模態窗口提供一個scope對象，否則他將使用$rootScope。可以爲模態窗口的打開動作指定過度動畫效果。官方文檔中描述了更多過度效果。
一旦模態窗口構建完畢，異步完成函數允許我們設置一個$scope.modal變量。模態窗口有一些函數。在本例中，我們關心show, hide和remove函數。remove函數特別重要。通過監聽scope對象的$destroy事件，我們可以確保對模態窗口對象進行垃圾回收。忽略它將會導致你的程序出現內存泄漏。
回顧
模態窗口是一個很強大的用戶界面組件，通過Ionic來展現和利用它是一件很輕鬆的事情。