ionic 動態組件（二）

3.彈出框 : $ionicPopup

彈出框通常用于提醒、警告等，在用戶響應之前其他交互行為不能繼續。與模態 對話框覆
蓋整個屏幕空間不同，彈出框通常僅占據一部分屏幕空間。

在 ionic 中，使用$ionicPopup 服務管理彈出框：
$ionicPopup.show(options)
.then(function(){
//這個函數在彈出框關閉時被調用
});
show()方法返回的是一個 promise 對象，當彈出框關閉后，該對象被解析，這意味著 then()
方法指定的參數函數此時將被調用。

show()方法的參數 options 是一個 JSON 對象，可以包括以下字段：
title - 彈出框標題文本
subTitle - 彈出框副標題文本
template - 彈出框內容的字符串模板
templateUrl - 彈出框內容的內聯模板 URL
scope - 要關聯的作用域對象
buttons - 自定義按鈕數組。按鈕總是被置于彈出框底部
cssClass - 附加的 CSS 樣式類

簡化的特定彈出框
除了 show()方法， $ionicPopup 還針對一些特定場景提供了簡化的方法，這些方法不需要自
定義按鈕，只需要設置 title 和 template 即可：

1.alert(options) - 警告彈出框，僅包含一個按鈕供關閉彈出框
option 屬性：
{
title: '', // String. 彈窗的標題。
subTitle: '', // String (可選)。彈窗的子標題。
template: '', // String (可選)。放在彈窗 body 內的 html 模板。
templateUrl: '', // String (可選)。 放在彈窗 body 內的 html 模板的 URL。
okText: '', // String (默認: 'OK')。 OK 按鈕的文字。
okType: '', // String (默認: 'button-positive')。 OK 按鈕的類型。
}

2.confirm(options)- 確認彈出框，包含一個取消按鈕和一個確認按鈕
option 屬性：
{
title: '', // String. 彈窗標題。
subTitle: '', // String (可選)。彈窗的副標題。
template: '', // String (可選)。放在彈窗 body 內的 html 模板。
templateUrl: '', // String (可選)。放在彈窗 body 內的一個 html 模板的 URL。
cancelText: '', // String (默認: 'Cancel')。一個取消按鈕的文字。
cancelType: '', // String (默認: 'button-default')。取消按鈕的類型。
okText: '', // String (默認: 'OK')。 OK 按鈕的文字。
okType: '', // String (默認: 'button-positive')。 OK 按鈕的類型。
}

3.prompt(options)- 輸入提示彈出框，包含一個文本輸入框、一個取消按鈕和一個確認按鈕
option 屬性：
{
title: '', // String. 彈窗的標題。
subTitle: '', // String (可選)。彈窗的副標題。
template: '', // String (可選)。放在彈窗 body 內的 html 模板。
templateUrl: '', // String (可選)。放在彈窗 body 內的 html 模板的 URL。
inputType: // String (默認: 'text')。 input 的類型。
inputPlaceholder: // String (默認: '')。 input 的 placeholder。
cancelText: // String (默認: 'Cancel')。取消按鈕的文字。
cancelType: // String (默認: 'button-default')。取消按鈕的類型。
okText: // String (默認: 'OK')。 OK 按鈕的文字。
okType: // String (默認: 'button-positive')。

4.浮動框 :$ionicPopover
如果需要從腳本中控制列表元素，可以使用$ionicListDelegate 服務：
浮動框通常用以非侵入的方式提供當前視圖的額外信息。
在 ionic 中使用浮動框的幾個步驟：
1.聲明模板
需要首先利用 ion-popover-view 指令聲明一個模板內容：

<ion-popover-view>
<!--模板內容-->
</ion-popover-view>

2.創建浮動框對象
使用$ion-popover 服務的以下方法創建浮動框對象：
fromTemplate(templateString,options)- 使用模板字符串構造浮動框
fromTemplateurl(templateUrl,options)- 使用內聯模板構造浮動框
注意：這兩個方法返回的都是 promise 對象，在浮動框對象被構造成功后得到解析，這時
可以獲取浮動框對象：
$ionicPopover.fromTemplate(...)
.then(function(popover){
//popover 參數是浮動框對象
});

3.操作浮動框對象
浮動框對象提供以下方法：
show() - 顯示浮動框
hide() - 關閉浮動框
remove() - 移除浮動框
isShown() - 浮動框是否處于顯示狀態？

5.載入指示器 :$ionicLoading
當進行耗時的操作時，可以使用載入指示器提示用戶操作進行中，并暫時阻止交互。 載入
指示器通常會疊加一個半透明的幕布層以便阻止用戶的交互。
在 ionic 中，使用$ionicLoading 服務操作載入指示器：
show(options) - 顯示載入指示器
hide() - 隱藏載入指示器

顯示參數
show()方法的 options 參數是一個 JSON 對象，可以包含如下字段：
template - 模板字符串
templateUrl - 內聯模板的 Url
scope - 要綁定的作用域對象
noBackdrop - 是否隱藏背景幕
hideOnStateChange - 當切換到新的視圖時，是否隱藏載入指示器
delay - 顯示載入指示器之前要延遲的時間，以毫秒為單位，默認為 0，即不延遲
duration - 載入指示器持續時間，以毫秒為單位。時間到后載入指示器自動隱藏。默認
情況下， 載入指示器保持顯示狀態，知道顯示的調用 hide()方法

參數配置服務 : $ionicLoadingConfig
如果要在多處都使用載入指示器，統一對 options 參數進行配置是一個更好的方法，這樣在
應用時直接調用 show()方法而不必傳遞參數了。這通過定義一個 constant provider 來實現：
angular.module("ezApp",["ionic"])
.constant("$ionicLoadingConfig",{
template : "default loading template ..."
})

$ionicLoading 服務會通過注入器查找這個常量，如果存在就使用其值作為參數進行顯示。
6.背景幕 :$ionicBackdrop
在浮動框、載入指示器中我們已經接觸過背景幕。它是一個覆蓋全屏的半透明圖層，用來 阻
止用戶的交互行為。
我們可以使用$ionicBackdrop 服務單獨地使用背景幕：
retain() - 保持背景幕
release() - 釋放背景幕
為什么不是 show()和 hide()呢？

在 UI 中可能有多個指令/元素都使用背景幕，為每個指令都創建單獨的背景幕是不明智的。
事實上， $ionicBackdrop 服務在 DOM 中只保留有一個背景幕。每次當使用 retain()方法時， 只
是給背景幕加一次鎖， release()方法只是給背景幕解一次鎖。如果 retain()被調用三次， 背
景幕將一直顯示，直到 release()也被調動三次后才隱藏。

交流QQ群：187269144 

QQ群2：438443293

QQ群3：248403526