[轉]Ionic最佳實務-使用模態視窗modal

標籤：

本文轉自：http://m.blog.csdn.net/blog/betreex/45649689

原文地址：Ionic最佳實務-使用模態視窗modal

模態視窗的結構

在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來展現和利用它是一件很輕鬆的事情。

 

[轉]Ionic最佳實務-使用模態視窗modal