methuselah methuselah - 6 months ago 148
AngularJS Question

Fire ionicModal on ionicPopup close

I want to open ionic modal whenever the user presses the Yes button, but close ionic popup whenever the user presses the No button. How can I do this?

At the moment, ionic popup opens up in each case. Here is my code so far:

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();
});
};
}

Answer

$ionicPopup supports confirm (a YES, NO dialog) which returns a promise and as an argument passes the result. You can use it like this:

$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 start drooling :P
    });
  } else {
    // This user apparently hates ice cream, which is ridiculous...
  }
});

You can get more info on the official documentation page.


Integrating my example into your code:

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();
            }
        });
    };
}