Ionic Javascript模态

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

使用模态

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

Ionic莫代尔

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

选项	类型	详情
focusFirstInput	boolean	它将自动聚焦模态的第一个输入。
backdropClickToClose	boolean	它可以在点击背景时关闭模态。默认值为true。
hardwareBackButtonClose	boolean	单击硬件后退按钮时，它将启用关闭模态。默认值为true。