Ionic - Javascript 模态

---

当 Ionic 模式被激活时，内容窗格将出现在常规内容的顶部。模态基本上是更大的弹出窗口，具有更多功能。默认情况下，模态将覆盖整个屏幕，但可以按照您想要的方式进行优化。

使用模态

在 Ionic 中实现模态有两种方法。一种方法是添加单独的模板，另一种方法是将其添加到常规 HTML 文件顶部的脚本标记内。我们需要做的第一件事是使用角度依赖注入将模态连接到控制器。然后我们需要创建一个模态。我们将传递范围并将动画添加到我们的模态中。

之后，我们将创建打开、关闭、销毁模态的函数。最后两个函数放置在我们可以编写隐藏或删除模式时将触发的代码的位置。如果您不想触发任何功能，当模态被删除或隐藏时，您可以删除最后两个功能。

控制器代码

.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>

我们在上一个示例中展示的方式是在某些现有 HTML 文件中将脚本标记用作模式的容器。

第二种方法是在templates文件夹中创建一个新的模板文件。我们将使用与上一个示例相同的代码，但我们将删除脚本标签，并且还需要更改控制器中的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 模板中创建了这个按钮。

还有其他模式优化选项。我们已经展示了如何使用范围和动画。下表显示了其他选项。