在進入更複雜的自訂Services範例之前，由於許多服務都牽涉到即時編輯與更新資料的功能，因此有必要先介紹適合用來編輯資料的「彈出式視窗」。Ionic「彈出式視窗」有兩類：$ionicModal與$ionicPopup。$ionicModal是完整頁面，以
<ion-modal-view></ion-modal-view>建置頁面，$ionicPopup則是對話框 (dialog)式，直接用JavaScript設定對話框的一些餐數值，通常用於訊息通知、確認等作用。兩種彈出式視窗外觀如下圖所示。
圖1. 彈出式視窗有兩種：$ionicModal與$ionicPopup
圖1上半的範例使用$ionicModal，下半則使用$ionicPopup。接下來以$ionicModal為例，說明如何製作彈出式視窗，進行資料編輯。
$ionicModal運用範例
此範例假設有一組記事項目資料，包含標題、內容等欄位，程式以內建JSON物件模擬資料來源。之後的範例，將改為資料庫存取的方式。JSON物件內容如下：var notes = [
{title: '記事1', message: '記事內容在此', date: '2015/4/29'},
{title: '開會通知', message: '本學期第一次班會於5/25舉行', date: '2015/4/29'},
{title: '教育訓練', message: '個資法教育訓練還有兩場', date: '2015/4/30'}
]
據此可建立一清單，顯示所有內容，而點選新增，則會跳出以$ionicModal製作的視窗，新增記事內容，如圖1上半所示。$ionicModal視窗通常是在某個頁面的controller內建立。app.js包含controller的定義如下：
- 第27-29行：建立addNote()函式，供頁面呼叫，開啟modal視窗。modal視窗則定義於35-40行。第41行開始則是openModal()函式定義。
- 第30-34行：新增一筆資料，並關閉modal視窗。
- 第35-40行：以.fromTemplateUrl(fileUrl, [options])建立modal視窗。第一個參數指定modal視窗html檔所在，第二個參數則是modal視窗額外的參數，此處定義scope和home.html相同，以及視窗出現的動畫形式。第39行則將建好的modal視窗設定為資料模型，以便後續進行開啟、關閉、跟移除視窗等動作。
- 第41-43行：定義開啟modal視窗的函式。
- 第44-46行：定義關閉modal視窗的函式。
- 第47-49行：移除modal視窗。.$on('$destroy', function)，定義onDestroy事件處理。
最後$ionicModal建立視窗所指定的addNote.html程式碼如下：
index.html程式碼則是：
<body ng-app="starter">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
沒有留言:
張貼留言