1

In my Ionic app, specifically when testing via ionic serve in Chrome, I'm seeing an odd behavior while navigating with ion-tabs. If I load the page as the root route (http://localhost:8100/#), navigation and state works fine. I can click on any of my tabs at the bottom of the page (iOS view) and get expected behavior.

Now instead, if I load the URL of one of the nested views, and I click on the tab to go back to that parent view, only the child view I entered on is shown.

Example (borrowed from Ionic's nightly pen): http://codepen.io/ionic/pen/odqCz#/tab/facts2

When entering the above codepen without the #/tab/facts2, navigation happens as expected - I can click the 'Scientific Facts' button, navigate down a few children, then click the 'Home' icon and go back to the root.

When entering at the second URL, I'm taken right to the facts2 page, as I expect. However, clicking the 'Home' icon always takes me back to facts2. 

<ion-tab title="Home" icon="ion-home" href="#/tab/home"> <ion-nav-view name="home-tab"></ion-nav-view> </ion-tab>

Interestingly, if I use the 'home' button on the facts2 page, it does correctly navigate to Home, but the nav icon will not work.

<a class="button icon ion-home" href="#/tab/home"> Home</a>

Is there something I'm not understanding about how the ui-router / state changing works, or is this a bug? My main concern is that when this app is compiled and deployed, and a user leaves the program in one of the child states, then re-opens, the navigation bar will break.

Improve this question

1 Answer 1

Reset to default
0

<ion-nav-view name="home-tab"></ion-nav-view> loads the views you have on stateprovider declaration of the config file. If you load a secondary view first it will not create the right Navigation History and you will not be able to go back to the main tab view. The name attribute is the same name you have on:

views: { 'home-tab': { templateUrl: "templates/home.html", controller: 'HomeTabCtrl' } }

So if you want to load a secondary view first add:

 $scope.$on('$ionicView.beforeEnter', function (event, viewData) { $ionicHistory.clearCache(); });

in the main tab view controller and it will clear the View cache and replace with the right view/html.

An alternative way is to use a copy of the state you want that will act on the current view you are working with, for instance:

 $stateProvider .state('tabs', { url: "/tab", abstract: true, templateUrl: "templates/tabs.html" }) .state('tabs.home', { url: "/home", views: { 'home-tab': { templateUrl: "templates/home.html", controller: 'HomeTabCtrl' } } }) .state('tabs.facts', { url: "/facts", views: { 'home-tab': { templateUrl: "templates/facts.html" } } }) .state('tabs.facts2', { url: "/facts2", views: { 'home-tab': { templateUrl: "templates/facts2.html" } } }) .state('tabs.about', { url: "/about", views: { 'about-tab': { templateUrl: "templates/about.html" } } }) .state('tabs.aboutFacts2', { url: "/about/facts2", views: { 'about-tab': { templateUrl: "templates/facts2.html" } } })

That will not solve your problem, but it will not cause it either. Facts2 is replacing two different views and is accessible from two different contexts, keeping the navigation history tight.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.