Adding navigation flow to a Modal pop


I am trying to workout the best way of opening a modal view that will itself have a number of views that are displayed within it, I want to be able to display a list of items select one and then move to a detail view and add some data and then complete the flow of the modal popup. I want to keep the separation of the controllers and if possible the state seperated out ? Is this possible with ionic ? or will I need to manage the view state manually ?



1 Like

any luck with this? my first thought is to set it up like tabs - state change on open/close - then have nested states that modify a named view inside the modal

I Look for the same thing, anyone have a solution ?

I find a way, I use simply new modal to switch to other page in an existing modal, with animations, switching left to right looks good.
If it can help :slight_smile:

1 Like

hi boblepepeur - could you share your solution (code) with us? pleaaase:)

hey yes,

so assume you have an ionic list in a modal, when you click on a list item you call openModalDevicesForm from the scope ->

$scope.openModalDevicesForm = function(device) {
    $ionicModal.fromTemplateUrl('templates/modals/settings/devices/details.html', {
        scope: $scope,
        animation: ionic.Platform.isIPad() ? '' : 'slide-left-right'
    }).then(function(modal) {
        $scope.modalDevicesForm = modal;
$scope.closeModalDevicesForm = function() {
    $scope.modalDevicesForm.hide().then(function() {

It will open a new modal with a slide-left-right animation, when you close by $scope.closeModalDevicesForm(), the previous modal is already open, so you will be back to your preview modal.

Hop it can help you, its just a trick to simulate the navigation flow, in my example i desactive it on iPad because its not so nice :smiley:

1 Like

Ionic team, is boblepepeur’s solution the preferred way to solve this ?


A also am looking to do this but I am looking do the navigation all within the same modal.

Click list item, details on that list item slide in with the back button available to get the user back to the list. boblepepeur’s solution will work just not what I was looking for exactly.

Is there a best way to accomplish this?

I wrote a custom directive to handle the List -> Select List Item (modal) interaction. It’s not completely ready yet, but will open source it when it is.

Any updates on this from the Ionic team? I need my modal to have its own navigation stack.

Please give this a try