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 模板中创建了这个按钮。

还有其他模态框优化选项。我们已经展示了如何使用作用域和动画。下表显示了其他选项。