Nav-view inside modal

I have a use case where I would like to have a modal that contains its own ion-nav-view. This modal would be potentially be shown from just about any other view in the project. I’m having a hard time working out how to accomplish the routing for this.
Since the modal would already be contained in a nav-view, would I need to register a child view inside each state for the modal’s named nav-view?

Does it have to be a nav-view? Have you tried using just regular views to accomplish this?

There was a similar topic a while back - can’t find anymore. You can use the same modal template throughout your app. However, you do have to define it in each controller. Modals aren’t “views”; so, I don’t see how you are going to be able to navigate to it in your scenario.

Ahh… Here it is: Modal via including template?

Actually, you could define the modal in a “main” controller. Then, all the other states/controllers that need to display it could just call it from the scope of the “main” controller.

Calendee: Yes, I am already re-using modals across different controllers, that’s not a problem. The part I struggle with is when I want that modal to contain a nav-view. The nav-view would then become a child of the parent nav-view, and I don’t quite get how to set up my routing/states to resolve.
mhartington: No, it doesn’t HAVE to be a nav-view, but I was hoping so. It’s the best fit for my desired ux.

Thanks both.

Hi mbuster, did you ever figure this out?

I did get a nested nav-view “working” inside a modal, but there are issues with using an ion-nav-bar in anything other than the main view, as mentioned in this thread:


I haven’t yet gotten around to making a codepen to illustrate, but my hope would be that eventually multiple nav-bars will be able to be used in ionic, regardless of what view the the various navigation stacks are presented in.

thanks! do you mind sharing how you define the ui-router states for the navigation in the modal?

I just built a codepen for the other thread I mentioned, that illustrates this problem. It also shows a few nested states for the modal view, maybe that will help you.
post with codpen

1 Like

Not sure if anyone is still interested, but check this out: ionic-modal-nav. It potentially allows for separate state navigation within a modal view.

With this PR you will also be able to use ion-nav-bar inside modal :wink:

The link of the PR against the new ionic-v1 repo