Tabs in tabs

@Arcania0311 wrote:

I've been trying to get nested tabs to work for quite a while now but I just can't seem to get it working.

I have a nested tab view in a tab view, looking like this:

Exhibit1.png1436x1144 81.8 KB

Now when I move to a different tab in the nested tab like so:

Exhibit3.png1430x1154 22 KB

And then move to a different top level tab, like so:

Exhibit2.png1440x1148 87.3 KB

And then move back to the nested tabs I would like to see the second picture again, but instead I see the first.

My states for the nested tabs look like this:

.state('tabs.exhibition', {
  	  url: '/exhibition',
  		views: {
        'exhibition-tab@tabs': {
          templateUrl: 'app/components/tabs/tabs.exhibitors.html',
          controller: 'ExhibitorsTabsCtrl'
        }
  		}
  	})
      // Exhibitors
    	.state('tabs.exhibition.exhibitors', {
    		url: '/exhibitors',
    		views: {
    			'exhibitors-content': {
    				templateUrl: 'app/components/exhibitors/exhibitors.html',
    				controller: 'ExhibitorsCtrl'
    			}
    		}
    	})
      // Products
      .state('tabs.exhibition.products', {
        url: '/products',
        views: {
          'products-content': {
            templateUrl: 'app/components/products/products.html',
            controller: 'ProductsCtrl'
          }
        }
      })

And my tab like this:

<ion-tab title="exhibition" icon-off="ion-grid" icon-on="ion-grid" ui-sref="tabs.exhibition.exhibitors">
      <ion-nav-view name="exhibition-tab"></ion-nav-view>
    </ion-tab>

I have already tried binding the ui-sref to a variable and setting that in the scope, but this doesn't update when I change the scoped variable. Another approach I tried was binding a ng-click to the tab and then using $state.go(...) but for some reason this only changes the url and does not update the view.

Any thoughts?

Posts: 1

Participants: 1

Read full topic