📌  相关文章
📜  Ionic-Javascript Modal

📅  最后修改于: 2020-12-08 05:07:47             🧑  作者: Mango

激活离子模式时，内容窗格将显示在常规内容的顶部。模态基本上是具有更多功能的较大弹出窗口。默认情况下，模态将覆盖整个屏幕，但可以根据需要对其进行优化。

使用模态

有两种在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标签用作某些现有HTML文件中的模式容器。

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


   
      
Modal Title

使用离子模式的第三种方式是插入内联HTML。我们将使用fromTemplate函数代替fromTemplateUrl 。

控制器代码

.controller('MyController', function($scope, $ionicModal) {
   $scope.modal = $ionicModal.fromTemplate( '' +
      ' ' +
         '
Modal Title
' +
      '' +
        
      ''+
         '' +
      '' +
        
   '', {
      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代码

当我们打开模式时，它将包含一个用于关闭它的按钮。我们在HTML模板中创建了此按钮。

离子模态

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

Option Type Detail
focusFirstInput boolean It will auto focus first input of the modal.
backdropClickToClose boolean It will enable closing the modal when backdrop is tapped. Default value is true.
hardwareBackButtonClose boolean It will enable closing the modal when hardware back button is clicked. Default value is true.