How To Force to Root State When Tab is Pressed?


I am testing my code on two tabs layout “Home” and “Search” with “navbar + back buttons”. Both have sub-states

  1. home > home-details

  2. search > search-results > search-result-details

this works fine with states preservation by ionic when used normally.

But, I have some information on Home or home-details tab which can bring directly to search-results state.

When I do that I am unable to go to root search state regardless of where I click. In this implementation, I can’t see any back button on nav bar either.

So I came up with elegant solution (that’s what I thought).

  1. used a controller called “TabsController” where I have two methods

    gotoHomeRootState = function() {

    gotoSearchRootState = function() {

  2. On my ion-tabs, I have ng-controller=“TabsController”

  3. For ion-tab, I have ng-click="{{gotoHomeRootState()}} and ng-click="{{gotoSearchRootState()}}" respectively.

  4. I replaced the usual state anchor href= “#tab/home” and href="#/tab/search" with ng-click so that it will force to root state.


its not working

I thought this should certainly work but no clue why its not.

Need some suggestion.


Removing the {{ }} solved the problem…

Should have been ng-click=“gotoHomeRootState()”

Don’t know what I was thinking.

Thanks anyway!

You don’t need that complicated approach. The same effect can be achieved by adding ui-sref=“tab.home” or ui-sref=“” to the tab tags.

I see your same response here that added to another similar post about Tab root. Where are you adding this ui-sref too? In the Tabs.html tab ?


>   <!-- Settings Tab -->
>   <ion-tab title="Menu" class="icon" icon-off="ion-ios-gear custom-icon-off" icon-on="ion-ios-gear" href="#/tab/menu" ui-sref="">
>     <ion-nav-view name="tab-menu"></ion-nav-view>
>   </ion-tab>


ahhhhh YES. I got it to work. finally. Yours was actually the most simple solution I have come across. Now I am going to try and toy with this working model and tweak it so that the ng-click=“gotoHomeRootState()” functions will go to Tab2 root ONLY if conditions on Tab1 are changed…otherwise go back to the cached view.

In theory:

gotoHomeRootState = function(val) {
   if (val) {
      $state.go('tab.home');  // go to root view
   } else {
      $location.url("/tab/home") ;  // return to cached view (TabHome_subPage)

I tried the modified solution…and $location.url("/tab/home") performs the same as $state.go(‘tab.home’). Both return the Tab view to root when the tab is selected. Need another solution for returning to the cached view now. Any thoughts?