模态窗口

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
});