$stateProvider
.state('tab') //abstract state
.state('tab.section1') //root state of my section 1 tab
.state('tab.section1-subsection') //a sub-state of section 2
.state('tab.section2') //root state of my section 2 tab
.state('tab.section2-subsection') //a sub-state of section 2
Now, if I navigate to 'tab.section1-subsection', then tap on tab2, and finally tap on tab 1 again, I am brought back to 'tab.section1-subsection'.
What I’d like to do is, whenever I tap on a tab, I am always brought to the tab’s root state and not to the sub-state I was on when I left the section.
So, if I navigate to #/tab/accounts/sub-accounts, then to another section (#/tab/other for example) and finally click on the “Accounts” tab again, the app brings me back to #/tab/accounts/sub-accounts.
However, what I want is that when I click on the “Accounts” tab, I am brought to the root state, hence #/tab/accounts.
So that’s what II feared, there no simple way to do it, you need a some kind of a hack. But in my case, there’s too many tabs and substates and it would take me ages to do.
I’m going to open an issue because I think this feature should be integrated in the framework.
I just replaced the href attribute with an ng-click calling a function. This function simply uses a $state.go method pointing to the proper root-state. This way it always redirects to the exact state and not one of its sub-state.
To make it flexible enough you simply pass in the state’s string name in the function, so every <ion-tab> will have something like ng-click="goTo('tab.tab1')" and the function itself would look like this:
@tomatoKetchup I see how that wold work but where do you put that function so it available to call. It seems to me that it would need to be defined in every controller, what PITA.
I also ran into this and my solution was ‘clear history’:
$scope.$on(’$ionicView.beforeEnter’, function (event, viewData) {
$ionicHistory.clearHistory();
});
While working with Ionic for the first time one of the areas I found most difiicult is to get the view navigation system to do what I want. This inlcudes menus, tabs nested withing menus, title bars shwoing back buttons when they shouldn’t and the other way around, and so on. For every problem there’s a workaround but as a beginner I found it difficult.
By the way, to reduce code repetition in my controllers I use Base Controllers from which I can inherit/reuse functionality (using prototypal inheritance). This has worked great for me.
@wilblack In my app I use the <ion-tabs> directive built-in with Ionic. If you have the same, all you need to do is to add the attribute ng-controller="myController" inside that <ion-tabs> and then you define that controller in your app.js for example.
I too am facing the same issue. Still using Ionic v1 too. Could you elaborate on your solution? What href did you replace? Also, could you explain exactly what the $scope.goTo function is doing…is it wiping out the history, resetting the stack…or??? I might need a little hand holding on this one. Thanks in advance.
And it did not work…then I tried again removing the href…not only did it not work, but when removing the href and using ui=sref by itself, it is auto adding the href back into the tag: