Ionic - Javascript 模態框

當啟用 Ionic 模態框時，內容面板將顯示在常規內容之上。模態框基本上是一個功能更強大的較大彈出視窗。預設情況下，模態框將覆蓋整個螢幕，但可以根據需要進行最佳化。

使用模態框

在 Ionic 中實現模態框有兩種方法。一種方法是新增單獨的模板，另一種方法是在常規 HTML 檔案內的 `<script>` 標籤中新增它。首先，我們需要使用 Angular 依賴注入將我們的模態框連線到控制器。然後，我們需要建立一個模態框。我們將傳入作用域併為模態框新增動畫。

之後，我們將建立用於開啟、關閉、銷燬模態框的函式。最後兩個函式放置在我們可以編寫程式碼的地方，這些程式碼將在模態框隱藏或移除時觸發。如果您不希望在模態框移除或隱藏時觸發任何功能，可以刪除最後兩個函式。

控制器程式碼

.controller('MyController', 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();
   };
	
   //Cleanup the modal when we're done with it!
   $scope.$on('$destroy', function() {
      $scope.modal.remove();
   });
	
   // Execute action on hide modal
   $scope.$on('modal.hidden', function() {
      // Execute action
   });
	
   // Execute action on remove modal
   $scope.$on('modal.removed', function() {
      // Execute action
   });
});

HTML 程式碼

<script id = "my-modal.html" type = "text/ng-template">
   <ion-modal-view>
      <ion-header-bar>
         <h1 class = "title">Modal Title</h1>
      </ion-header-bar>
		
      <ion-content>
         <button class = "button icon icon-left ion-ios-close-outline"
            ng-click = "closeModal()">Close Modal</button>
      </ion-content>
   </ion-modal-view>
</script>

上一個示例中展示的方法是使用 `<script>` 標籤作為模態框的容器，位於某個現有的 HTML 檔案內。

第二種方法是在 `templates` 資料夾內建立一個新的模板檔案。我們將使用與上一個示例相同的程式碼，但是我們將刪除 `<script>` 標籤，並且還需要更改控制器中的 `fromTemplateUrl` 以將模態框與新建立的模板連線。

控制器程式碼

.controller('MyController', function($scope, $ionicModal) {
   $ionicModal.fromTemplateUrl('templates/modal-template.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();
   };
	
   //Cleanup the modal when we're done with it!
   $scope.$on('$destroy', function() {
      $scope.modal.remove();
   });
	
   // Execute action on hide modal
   $scope.$on('modal.hidden', function() {
      // Execute action
   });
	
   // Execute action on remove modal
   $scope.$on('modal.removed', function() {
      // Execute action
   });
});

HTML 程式碼

<ion-modal-view>
   <ion-header-bar>
      <h1 class = "title">Modal Title</h1>
   </ion-header-bar>
	
   <ion-content>
      <button class = "button icon icon-left ion-ios-close-outline"
         ng-click = "closeModal()">Close Modal</button>
   </ion-content>
</ion-modal-view>

使用 Ionic 模態框的第三種方法是內聯插入 HTML。我們將使用 `fromTemplate` 函式而不是 `fromTemplateUrl`。

控制器程式碼

.controller('MyController', function($scope, $ionicModal) {
   $scope.modal = $ionicModal.fromTemplate( '<ion-modal-view>' +
      ' <ion-header-bar>' +
         '<h1 class = "title">Modal Title</h1>' +
      '</ion-header-bar>' +
		
      '<ion-content>'+
         '<button class = "button icon icon-left ion-ios-close-outline"
            ng-click = "closeModal()">Close Modal</button>' +
      '</ion-content>' +
		
   '</ion-modal-view>', {
      scope: $scope,
      animation: 'slide-in-up'
   })

   $scope.openModal = function() {
      $scope.modal.show();
   };
	
   $scope.closeModal = function() {
      $scope.modal.hide();
   };
	
   //Cleanup the modal when we're done with it!
   $scope.$on('$destroy', function() {
      $scope.modal.remove();
   });
	
   // Execute action on hide modal
   $scope.$on('modal.hidden', function() {
      // Execute action
   });
	
   // Execute action on remove modal
   $scope.$on('modal.removed', function() {
      // Execute action
   });
});

所有三個示例都將具有相同的效果。我們將建立一個按鈕來觸發 `$ionicModal.show()` 以開啟模態框。

HTML 程式碼

<button class = "button" ng-click = "openModal()"></button>

開啟模態框時，它將包含一個用於關閉它的按鈕。我們在 HTML 模板中建立了這個按鈕。

還有其他模態框最佳化選項。我們已經展示瞭如何使用作用域和動畫。下表顯示了其他選項。