Hi,
I am testing my code on two tabs layout “Home” and “Search” with “navbar + back buttons”. Both have sub-states
-
home > home-details
-
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).
-
used a controller called “TabsController” where I have two methods
gotoHomeRootState = function() {
$state.go(‘tab.home’);
}
gotoSearchRootState = function() {
$state.go(‘tab.search’);
}
-
On my ion-tabs, I have ng-controller=“TabsController”
-
For ion-tab, I have ng-click="{{gotoHomeRootState()}} and ng-click="{{gotoSearchRootState()}}" respectively.
-
I replaced the usual state anchor href= “#tab/home” and href="#/tab/search" with ng-click so that it will force to root state.
BUT
its not working
I thought this should certainly work but no clue why its not.
Need some suggestion.
Thanks!
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=“tab.search” 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 ?
IE:
> <!-- 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="tab.menu">
> <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?