在ionicPopup关闭火的ionicModal

时间:2016-05-20 12:32:57

标签: javascript angularjs ionic-framework

每当用户按下按钮时,我想打开离子模态,但只要用户按下按钮,就会关闭离子弹出窗口。我怎么能这样做?

目前,每种情况下都会打开离子弹出窗口。到目前为止,这是我的代码:

services.js

 function PopupService($ionicPopup) {

   function acceptAppointmentPopup(scope) {
     return $ionicPopup.show({
       title: 'Are you sure you want to accept this appointment?',
       scope: scope,
       buttons: [{
         text: '<b>Yes</b>',
         type: 'button-positive',
         onTap: function(e) {}
       }, {
         text: 'No',
         onTap: function(e) {}
       }, ]
     })
   }

   return {
     acceptAppointmentPopup: acceptAppointmentPopup
   };
 }

controller.js

function BusinessPendingAcceptanceCtrl($scope, PopupService, ModalService) {

  $scope.newMessageModal = function() {
    ModalService.show('templates/modals/new-message.html', 'ConsumerNotificationsCtrl as vm');
  }

  $scope.showAcceptAppointmentPopup = function() {
    $scope.data = {}
    var myPopup = PopupService.acceptAppointmentPopup($scope);
    myPopup.then(function(res) {
      $scope.newMessageModal();
    });
  };
}

1 个答案:

答案 0 :(得分:1)

$ionicPopup支持confirm (一个YES,NO对话框),它返回promise并作为参数传递结果。您可以像这样使用它:

$ionicPopup.confirm({ // example taken from official documentation
  title: 'Consume Ice Cream',
  template: 'Are you sure you want to eat this ice cream?'
}).then(function (result) {
  if (result) {
    // At this point user confirmed that they want to eat the ice cream,
    // so lets open a modal to visually show the user how the ice cream is being consumed
    $ionicModal.fromTemplateUrl('my-modal.html', {
      scope: $scope,
      animation: 'slide-in-up'
    }).then(function(modal) {
      $scope.modal = modal;
      $scope.modal.show();
      // This is where the user starts drooling :P
    });
  } else {
    // This user apparently hates ice cream, which is ridiculous...
  }
});

您可以在official documentation page上获得更多信息。

将我的示例集成到您的代码中:

<强> services.js

function PopupService($ionicPopup) {
    function acceptAppointmentPopup(scope) {
        return $ionicPopup.show({
            title: 'Are you sure you want to accept this appointment?',
            scope: scope,
            buttons: [{
                text: '<b>Yes</b>',
                type: 'button-positive',
                onTap: function(e) {
                    return true;
                }
            }, {
                text: 'No',
                onTap: function(e) {
                    return false;
                }
            }]
        })
    }

    return {
        acceptAppointmentPopup: acceptAppointmentPopup
    };
}

<强> controller.js

function BusinessPendingAcceptanceCtrl($scope, PopupService, ModalService) {

    $scope.newMessageModal = function() {
        ModalService.show('templates/modals/new-message.html', 'ConsumerNotificationsCtrl as vm');
    }

    $scope.showAcceptAppointmentPopup = function() {
        $scope.data = {}
        var myPopup = PopupService.acceptAppointmentPopup($scope);
        myPopup.then(function(res) {
            if (res) { // Here we check if user pressed Yes - Yes button returns true
                $scope.newMessageModal();
            }
        });
    };
}