Linking to states in tabs


I am having an issue where I navigate (via $state.go()) to a state that is the second tab (of 3), and then it changes state immediately to the default tab. I have scoured my controller/service code on the state that I am navigating too but I cannot find anything that is triggering this 2nd state change. The tabs all inherit an abstract state and all have resolves, any ideas on where to look? I tried break points on stateChangeStart and the using throw Error().stack to see what is triggering this, but it is all internal ionic bundle code.


And your default tab is your also your default state in your routings? (otherwise(’…’))

If so your $state.go is wrong (your state das not exists)

Greetz, bengtler


No, not the default routing state. The state I am navigating too exists and I can step through the controller/resolve for it, but as soon as it hits the end of the controller it starts loading the second state.


Than maybe you can put a codepen together?


Simple example, of my app. The tabs button on the side menu tries to link to tab 2, which loads but then immediately after loads to tab 1


I am also having this same issue and it seems to be an issue with the ui-sref in the tabs. If I remove ui-sref from the tabs then the $state.go funciton behaves as expected. Furthermore, I have debugged down several layers into the Javascript and can see that the correct state is being called initially. However, once this state is called then the furtherest to the right tab is activated and navigated to, quickly followed by the tab you were trying to navigate away from being called and reloaded. Another behaviour I have noticed is that if I am in the right most tab then the routing will work with no issue and navigate fine. Has anyone else experienced this? I am new to both Ionic and AngularJS and while I am digging into it, have spent about ten hours so far, I doubt my ability to figure it out. If you have experienced this and corrected it could you please share the solution? If not and you simply have an idea I might could try that would be appreciated as well. I will continue digging and update this if I do find a solution.


No i never found the issue. It is somehow related to my custom history service, i havent figured out why, but just going to the state even with params triggers it. The ionic history service (not global so useless) never encounters the issue because it doesnt have to back into tabs


I’ll keep looking. Hopefully someone more familiar with the technology can discover something or someone who has faced the issue and discovered a solution will provide some insight.


So I have looked into it more and have narrowed down the location of the issue a little more. It is in the ionicTabs controller. This controller starts at line 5143 in ionic-angular.js. The place where the problem seems to be occuring is at line 5173. For some reason the code is coming here to remove the current visible tab. The issue is that since there is more than one tab on the page the code executes the else in this block.

 if (tab.$tabSelected) {
  //Try to select a new tab if we're removing a tab
  if (self.tabs.length === 1) {
    //do nothing if there are no other tabs to select
  } else {
    //Select previous tab if it's the last tab, else select next tab
    var newTabIndex = tabIndex === self.tabs.length - 1 ? tabIndex - 1 : tabIndex + 1;[newTabIndex]);

This is finding the right most tab on the screen and navigating to it. This normally would be a desired behaviour but since I am trying to move to a view that doesn’t contain the tab bar this is causing my application to not navigate as expected.

Please help test: Angular 1.3, improved transitions, cached views, etc

I don’t think this is the issue. If I tell it to go to tab 2 of 3 or 3 of 3, it will always select 1 of 3. Note sure if you noticed this in your code, but mine actually loads the controller for tab 2, but then immediately starts loading tab 1 which is the tab that ends up loading.


Yes I get the same exact issue. I’m fairly certain that it is this block of code that is causing the issue. What is happening is it is being told to navigate away from the tab view but when it tells it to deslect that tab there are still multiple tabs on the page. Since there are multiple tabs it’s falling into that else. Once it hits the else it goes forward from the selected tab, and then when it comes back it deselects the tab it just selected and goes backwards from that tab. I need to dig deeper and figure out what is calling the deselect funciton but I think the issue is a missing flag or that this particular function shouldn’t be called at all in this particular case.


So if I don’t let the code fall into the first if block, ie make tab.$isSelected false, navigation works exactly like it is supposed to.