Switching tabs sometimes switches to the wrong state

ionic-v1
1

Hello,

I’m having some issues using ion-tabs. When you tap on each tab it sometimes renders the wrong state.

So for example:

Tab A, Tab B, Tab C

When you tap on Tab B then back to Tab A then back to Tab B it will show the Tab A state again (or a completely different one if you’ve been somewhere else in the app).

My states code is:

.state 'dashboard',
  abstract: true
  auth_required: true
  url: '/dash'
  templateUrl: 'templates/dashboard/index.html'

.state 'dashboard.activity',
  url: '/activity'
  templateUrl: 'templates/dashboard/activity/index.html'

.state 'dashboard.articles',
  url: '/articles'
  templateUrl: 'templates/dashboard/articles/index.html'

.state 'dashboard.hubs',
  url: '/hubs'
  templateUrl: 'templates/dashboard/hubs/index.html'

My tabs code is:

<ion-tabs class="tabs-icon-top tabs-positive dashboard">

  <ion-tab title="Activity" icon-on="fa fa-bars" icon-off="fa fa-bars" ui-sref="dashboard.activity">
    <ion-nav-view>
    </ion-nav-view>
  </ion-tab>

  <ion-tab title="Articles" icon-on="fa fa-file" icon-off="fa fa-file" ui-sref="dashboard.articles">
    <ion-nav-view>
    </ion-nav-view>
  </ion-tab>

  <ion-tab title="Hubs" icon-on="fa fa-comment" icon-off="fa fa-comment" ui-sref="dashboard.hubs">
    <ion-nav-view>
    </ion-nav-view>
  </ion-tab>

  <ion-tab title="Notifications" icon-on="fa fa-bell" icon-off="fa fa-bell" ui-sref="dashboard.notifications">
    <ion-nav-view>
    </ion-nav-view>
  </ion-tab>

</ion-tabs>

I don’t know what could be causing this and have tried numerous things on Google. Anyone got any ideas?

2

Hi @TomChinery,
Maybe the structure is wrong.

Try:
app.js:

.state('dashboard', {
    url: "/dash",
	auth_required: true,
    views: {
      'dashboard': {
        templateUrl: "templates/dashboard/index.html"
      }
    }
  })
.state('dashboard.activity', {
    url: "/activity",
    views: {
		'dashboard-activity': {
			templateUrl: "templates/dashboard/activity/index.html",
		}
    }
})
.state('dashboard.articles', {
    url: "/articles",
    views: {
		'dashboard-articles': {
			templateUrl: "templates/dashboard/articles/index.html",
		}
    }
})
.state('dashboard.hubs', {
    url: "/hubs",
    views: {
		'dashboard-hubs': {
			templateUrl: "templates/dashboard/hubs/index.html",
		}
    }
})
.state('ashboard.notifications', {
    url: "/notifications",
    views: {
		'dashboard-notifications': {
			templateUrl: "templates/dashboard/notifications/index.html",
		}
    }
})

dashboard/index.html:

<ion-tabs class="tabs-icon-top tabs-positive dashboard">

  <ion-tab title="Activity" icon-on="fa fa-bars" icon-off="fa fa-bars" ui-sref="dashboard.activity">
    <ion-nav-view name="dashboard-activity"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Articles" icon-on="fa fa-file" icon-off="fa fa-file" ui-sref="dashboard.articles">
    <ion-nav-view name="dashboard-articles"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Hubs" icon-on="fa fa-comment" icon-off="fa fa-comment" ui-sref="dashboard.hubs">
    <ion-nav-view name="dashboard-hubs"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Notifications" icon-on="fa fa-bell" icon-off="fa fa-bell" ui-sref="dashboard.notifications">
    <ion-nav-view name="dashboard-notifications"></ion-nav-view>
  </ion-tab>
  
</ion-tabs>

Hope it works!