My main app UI uses ion-nav-bar, ion-nav-back-button, etc for navigation successfully.
I also have a modal which contains a nested view, another ion-nab-bar, etc. All of my nested states/views/navigation inside this modal work exactly as they should. The only problem is that the nav-bar is hidden (invisible class gets applied somehow).
Markup is like this for the modal:
<ion-nav-bar class="bar-dark nav-title-slide-ios7" >
<ion-nav-back-button class="button-clear">
<i class="ion-chevron-left"></i> <span style="text-transform:capitalize;">{{backTitle}}</span>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="navable-modal">
</ion-nav-view>
</div>```
And like this for a view:
```
This is the same markup/pattern I’m using successfully in the main UI.
Anyone have any idea why the ion-nav-bar inside the modal is being set to invisible?
Having looked into it a little more, I found that by assigning the modal’s ion-nav-bar a handle in the markup, you can then force it to be displayed, change text, etc via $ionicNavBarDelegate.
What’s odd is that I didn’t need to do this before sometime around 1.0.beta6. Also, in this scenario the nav-bar will not honor the title attribute of the ion-view it is currently displaying, I have to explicitly set the text, show/hide the back button, etc. Not ideal, but workable.
Can you explain how did you make it work please? The part involving the nested views and the navigation between them. I’m facing the same issue and have no clue what to do. @mbuster
The best way to understand nested views is to read the ui-router docs. Basically, you will have named views, and you will declare states with templates for each named view.
Here’s a code pen from @mhartington that illustrates it.
Past that, you may want to start a new thread for your question.
A number of popular apps use navigation stacks inside modals. My use case is very similar to this screen shot of the Nest thermostat settings modal, which contains a navigable hierarchy of list views for settings/preferences.
There are a number of other use-cases, such as sign-in/registration modals, walkthroughs, help topics/guides, etc where a working navbar would be useful inside a modal to display hierarchal information.
All that being said, I’ll put together a code pen to illustrate.
Here’s a pen with navigation “working” inside the modal, but with the ion-nav-bar not visible. If you manually remove the ‘invisible’ tag from the nag-bar in the inspector, it will appear, but not display the title, show the back button, etc.
Facebook’s Messenger app have navigation in a modal.
Just press on the “start new conversation” button on top-left of the side pane, then “Gruppo” (Groups) and you’ll see the navigation transition happening.
It somehow works if you change title e.g. with the $ionicNavBarDelegate. But besides being impracticle the nav bar title animation do not work.
A fix would be useful.
Hey @mhartington - can you provide some feedback on these follow up questions and feedback?
Primarily, I think it’d be good to get an official stance on this issue. Is it something that you’re talking about internally? Will it be addressed eventually? Or is it something the Ionic team isn’t interested in pursuing?
If the case is that even with evidence that this isn’t an uncommon practice you’re still against incorporating it in Ionic, is there advice you could give on creating a community module that does allow navigation within the modal? Or point us in the right direction towards similar Ionic internals that could be emulated?
Ultimately the preference is to see this end up in Ionic core, but i’d like to try and extend Ionic myself to get this functionality in the meantime if necessary. I’m using Ionic for a few projects and would like to continue doing so - and this modal pattern is the way one of the apps i’m working on was designed.