Subsequent navigation after $state.go('subtab-state') results in white screen with nothing getting rendered


#1

Hi there - I have three application states that correspond to the tabs here:

<ion-view title="Search" cache-view="false">
	<ion-tabs class="tabs-icon-top tabs-positive">
		<ion-tab title="State1" icon="ion-ios-location" href="#/app/search/state1">			
		  <ion-nav-view name="state1-tab"></ion-nav-view>			
		</ion-tab>

		<ion-tab title="State2" icon="ion-person-stalker" href="#/app/search/state2">
		  <ion-nav-view name="state2-tab"></ion-nav-view>
		</ion-tab>
	</ion-tabs>	

The states work great when navigating between them on the User Interface via the UI elements. On another page in the application, I have this code:

$state.go('app.search.state2');

This works well, the user is taken to sub-state2.

However, when the user then clicks to the sub tab for State 1 on the UI, the first tab is displayed with a white background and none of the UI elements are rendered. There is no output in the console. Why does this happen? How can I work around this? Thank you for your help!


#2

there should be some problem in routing… share your code on codepen


#3

Thank you harshit886. It turned out that there was indeed a problem in routing:

<ion-tab title="State2" icon="ion-person-stalker" href="#/app/search/state2 <---THIS WAS INCORRECT."> <ion-nav-view name="state2-tab"></ion-nav-view> </ion-tab>

Thank you for your help in troubleshooting this!