模態視窗

Ionic 有自己的擴充套件用於顯示模態視窗。可以通過使用 <script> 標記或使用單獨的模板檔案將模板直接插入檢視來建立模態。在這個例子中，我們假設你在名為 templates 的資料夾中有一個名為 modal-template.html 的 html 檔案。使用 fromTemplateUrl 在模態初始化函式中設定模板路徑。

在範圍中建立模態物件

HTML

<ion-modal-view>
  <ion-header-bar>
    <h1>Modal title</h1>
  </ion-header-bar>
  <ion-content>
    <p>Modal content</p>
  </ion-content>
</ion-modal-view> 

調節器

$ionicModal.fromTemplateUrl('/templates/modal-template.html', {
  scope: $scope,
  animation: 'slide-in-up'
}).then(function(modal) {
  $scope.modal = modal;
});

控制模態

然後，你可以使用以下命令控制模態。

開啟模態

$scope.modal.show();

關閉模態

$scope.modal.hide();

刪除模態

$scope.modal.remove();

模態事件

你可以使用以下功能收聽模態事件。

莫代爾是隱藏的

$scope.$on('modal.hidden', function() {
  // Do something when modal is hidden
});

模態被刪除

$scope.$on('modal.removed', function() {
  // Do something when modal is removed
});