1. 模態對話框 : $ionicModal
模態對話框常用來供用戶進行選擇或編輯，在模態對話框關閉之前，其他 的用戶交互行為被阻止 .操作模態對象返回結果，模態對象的方法提前定制。
三個步驟
1.聲明對話框模板 使用ion-modal-view指令聲明對話框模板，對話框模板通常置入 script內以構造內聯模板：
<script id="a.html" type="text/ng-template">
<ion-modal-view> <!--對話框內容--> </ion-modal-view>
</script>
<script id="my-modal.html" type="text/ng-template">
<ion-modal-view>
<ion-header-bar class="bar-positive">
<h1 class="title">ion-modal-view</h1>
<a class="button" ng-click="closeModal();">關閉</a>
<a class="button" ng-click="removeModal();">remove</a>
</ion-header-bar>
<ion-content>
<div class="padding">
<div class="list">
<label class="item item-input">
<span class="input-label">First Name</span>
<input ng-model="newUser.firstName" type="text">
</label>
<label class="item item-input">
<span class="input-label">Last Name</span>
<input ng-model="newUser.lastName" type="text">
</label>
<label class="item item-input">
<span class="input-label">Email</span>
<input ng-model="newUser.email" type="text">
</label>
<button class="button button-full button-positive" ng-click="createContact()">Create</button>
</div>
</div>
</ion-content>
</ion-modal-view>
</script>
2.創建對話框對象 服務$ionicModal有兩個方法用來創建對話框對象：
fromTemplate(templateString,options) - 使用字符串模板 fromTemplateUrl(templateUrl,options) - 使用內聯模板這兩個方法返回的都是一個對話框對象。
<script>
angular.module("myApp", ["ionic"])
.controller("myCtrl", function($scope, $ionicModal) {
$ionicModal.fromTemplateUrl("my-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.removeModal = function() {
$scope.modal.remove();
};
//Cleanup the modal when we are done with it!
$scope.$on("$destroy", function() {
console.log('modal.$destroy');
$scope.modal.remove();
});
// Execute action on hide modal
$scope.$on("modal.hidden", function() {
// Execute action
console.log('modal.hidden');
});
// Execute action on remove modal
$scope.$on("modal.removed", function() {
// Execute action
console.log('modal.removed');
});
$scope.newUser = {};
$scope.createContact = function () {
console.log('Create Contact', $scope.newUser);
$scope.modal.hide();
};
});
</script>
3.操作對話框對象 對象框對象有以下方法用於顯示、隱藏或刪除對話框：
show() - 顯示對話框
hide() - 隱藏對話框
remove() - 移除對話框
isShown() - 對話框是否可視
2. 上拉菜單 : $ionicActionSheet
上拉菜單是一個自屏幕底部向上滑出的菜單，通常用來讓用戶做出選擇。
ionic的上拉菜單由三種按鈕組成，點擊任何按鈕都自動關閉上拉菜單： 取消按鈕 - 取消按鈕總是位於菜單的底部，用戶點擊該按鈕將關閉。
一個上拉菜單 最多有一個取消按鈕。
危險選項按鈕 - 危險選項按鈕文字被標紅以明顯提示。一個上拉菜單最多有一個 危險選項按鈕。
自定義按鈕 - 用戶定義的任意數量的按鈕。
在ionic中使用上拉菜單需要遵循以下步驟：
1.定義上拉菜單選項 使用一個JSON對象定義上拉菜單選項，包括以下字段：
titleText - 上拉菜單的標題文本
buttons - 自定義按鈕數組。每個按鈕需要一個描述對象，其text字段用於按鈕顯示
cancelText - 取消按鈕的文本。如果不設置此字段，則上拉菜單中不出現取消按鈕
destructiveText - 危險選項按鈕的文本。如果不設置此字段，則上拉菜單中不出現危險選項按鈕
buttonClicked - 自定義按鈕的回調函數，當用戶點擊時觸發
cancel - 取消按鈕回調函數，當用戶點擊時觸發
destructiveButtonClicked - 危險選項按鈕的回調函數，當用戶點擊時觸發
cancelOnStateChange - 當切換到新的視圖時是否關閉此上拉菜單。默認為true
cssClass - 附加的CSS樣式類名稱
2.創建上拉菜單 $ionicActionSheet服務的show()方法用來創建上拉菜單，返回一個函數，調用該 返回函數可以關閉此菜單。
<a class="button" ng-click="show();">操作</a>
<script>
angular.module("myApp", ["ionic"])
.controller("myCtrl",function($scope, $ionicActionSheet, $timeout) {
// Triggered on a button click, or some other target
$scope.show = function() {
// Show the action sheet
var hideSheet= $ionicActionSheet.show({
cancelOnStateChange:true,
cssClass:'action_s',
titleText: "操作當前文章",
buttons: [
{ text: "<b>分享</b>文章" },
{ text: "移動到..." }
],
buttonClicked: function(index) {
console.log('操作了第'+index+'個文章');
return true;
},
cancelText: "取消",
cancel: function() {
// add cancel code..
console.log('執行了取消操作');
return true;
},
destructiveText: "刪除",
destructiveButtonClicked:function(){
console.log('執行了刪除操作');
return true;
}
});
// For example's sake, hide the sheet after two seconds
$timeout(function() {
hideSheet();
}, 2000);
};
});
</script>
3. 彈出框 : $ionicPopup
彈出框通常用於提醒、警告等，在用戶響應之前其他交互行為不能繼續。與模態 對話框覆蓋整個屏幕空間不同，彈出框通常僅占據一部分屏幕空間。
在ionic中，使用$ionicPopup服務管理彈出框：
$ionicPopup.show(options) .then(function(){
//這個函數在彈出框關閉時被調用
});
show()方法返回的是一個promise對象，當彈出框關閉后，該對象被解析，這意味着 then()方法指定的參數函數此時將被調用。
show()方法的參數options是一個JSON對象，可以包括以下字段：
title - 彈出框標題文本
subTitle - 彈出框副標題文本
template - 彈出框內容的字符串模板
templateUrl - 彈出框內容的內聯模板URL
scope - 要關聯的作用域對象
buttons - 自定義按鈕數組。按鈕總是被置於彈出框底部
cssClass - 附加的CSS樣式類
<ion-content padding="true">
<a class="button button-block button-calm" ng-click="showPopup();">定制彈出框/popup</a>
<a class="button button-block button-calm" ng-click="showConfirm();">確認框/confirm</a>
<a class="button button-block button-calm" ng-click="showAlert();">警告框alert</a>
<a class="button button-block button-calm" ng-click="showPrompt();">提示框/prompt</a>
</ion-content>
<ion-footer-bar class="bar-positive">
<h1 class="title">{{status}}</h1>
</ion-footer-bar>
<script>
angular.module("myApp", ["ionic"])
.controller("myCtrl",function($scope, $ionicPopup, $timeout) {
$scope.status = "";
// 顯示定制彈出框
$scope.showPopup = function() {
$scope.data = {}
// 調用$ionicPopup彈出定制彈出框
$ionicPopup.show({
template: "<input type='password' ng-model='data.wifi'>",
title: "請輸入Wi-Fi密碼",
subTitle: "密碼為8位",
scope: $scope,
buttons: [
{ text: "取消" },
{
text: "<b>保存</b>",
type: "button-positive",
onTap: function(e) {
return $scope.data.wifi;
}
}
]
})
.then(function(res) {
$scope.status = ["Wi-Fi密碼到手了",":",res].join(" ");
});
};
// 確認彈出框
$scope.showConfirm = function() {
$ionicPopup.confirm({
title: "定制冰激凌",
template: "你確定要吃我的冰淇淋嗎？",
okText:"OK"
})
.then(function(res) {
if(res) {
$scope.status = "憑什么吃我的冰淇淋！";
} else {
$scope.status = "謝謝你不吃之恩！";
}
});
};
//警告彈出框
$scope.showAlert = function() {
$ionicPopup.alert({
title: "不要吃果凍",
template: "它們可能是用舊的皮鞋幫做的！"
})
.then(function(res) {
$scope.status = "感謝上帝，你沒吃鞋幫哦！11";
});
};
//輸入提示框
$scope.showPrompt = function(){
$ionicPopup.prompt({
title: "不要吃果凍",
template: "它們可能是用舊的皮鞋幫做的！"
})
.then(function(res) {
$scope.status = "感謝上帝，你沒吃鞋幫哦！"+res;
});
}
});
</script>
4.浮動框 : $ionicPopover
<a class="button" ng-click="openPopover($event);">幫助</a>
<script id="ez-popover.html" type="text/ng-template">
<ion-popover-view class="calm-bg light padding">
<p>這里應該有些幫助信息....</p>
</ion-popover-view>
</script>
angular.module("myApp", ["ionic"])
.controller("myCtrl", function($scope, $ionicPopover) {
$ionicPopover.fromTemplateUrl("ez-popover.html", {
scope: $scope
})
.then(function(popover){
$scope.popover = popover;
})
$scope.openPopover = function($event) {
$scope.popover.show($event);
};
$scope.closePopover = function() {
$scope.popover.hide();
};
//銷毀事件回調處理：清理popover對象
$scope.$on("$destroy", function() {
$scope.popover.remove();
});
// 隱藏事件回調處理
$scope.$on("popover.hidden", function() {
// Execute action
});
//刪除事件回調處理
$scope.$on("popover.removed", function() {
// Execute action
});
});
5. 載入指示器 : $ionicLoading
<a class="button icon ion-refresh" ng-click="load();">載入</a>
angular.module("myApp", ["ionic"])
.controller("myCtrl", function($scope, $ionicLoading,$timeout) {
$scope.items = [];
var idx = 0;
$scope.load = function() {
//顯示載入指示器
$ionicLoading.show({
template: "正在載入數據，請稍后..."
});
//延時2000ms來模擬載入的耗時行為
$timeout(function(){
for(var i=0;i<10;i++,idx++) $scope.items.unshift("item " + idx);
//隱藏載入指示器
$ionicLoading.hide();
},2000);
};
});
6. 背景幕 : $ionicBackdrop
angular.module("myApp",["ionic"])
.controller("myCtrl",function($scope, $ionicBackdrop, $timeout,$interval) {
$scope.locks = 0;
//保持背景幕
$scope.retain = function() {
$ionicBackdrop.retain();
$scope.locks++;
};
//釋放背景幕
$scope.release = function() {
$ionicBackdrop.release();
$scope.locks > 0 ? $scope.locks-- : 0;
};
$interval(function(){
if($scope.locks > 0){
$ionicBackdrop.release();
$scope.locks--;
}
},2000)
});
</script>