Question

这是我的代码..如果我删除关闭模态函数，则没有效果。如果我点击模态外的任何位置，模态将关闭。但我需要这个关闭模态函数，因为我需要在其中设置一个标志以供进一步使用。我该如何进一步处理？

$scope.$on('$ionicView.afterEnter', function() {
$scope.openModal();
}
$ionicModal.fromTemplateUrl("settings/settingsModal.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();

    };
   }

Answer 1

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

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

Modal options

Answer 2

关闭模态功能适用于您想要手动关闭模态的情况。例如，在一段时间之后它已经打开或者如果发生了某些事情/用户做某事例如按下按钮。

有多种方法可以在隐藏/移除模态时聆听，以满足您的情况和需求。例如：

// Execute action on hide modal
$scope.$on('modal.hidden', function() {
  // Execute action
  console.log('modal was hidden');
});

// Execute action on remove modal
$scope.$on('modal.removed', function() {
  // Execute action
  console.log('modal was removed');
});

有了这些，你应该能够做我理解你想做的事。

直接来自文档：http://ionicframework.com/docs/api/service/ $ ionicModal /

$ scope.closeModal需要什么？

2 个答案: