Adding navigation flow to a Modal pop

Hi,

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 ?

Thanks

Matt

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 ?

mmhh…
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.modalDevicesForm.show();
    });
};
$scope.closeModalDevicesForm = function() {
    $scope.modalDevicesForm.hide().then(function() {
        $scope.modalDevicesForm.remove();
    });
};

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 ?

p

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

Example:
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 https://www.npmjs.com/package/ionic-modal-nav

Thanks