Using state.go with tabs, not registered in tabs.html file

1

Ok so kinda confused here. I’m sure its obvious but just not seeing it.

When someone tabs on a peice of content I try and switch them to another tab like so:

 $scope.designerDetail = function(did){
 	$state.go('tab.designer-detail', {designerId: did});
 }

It changes the url properly in the browser, though the page ultimately doesn’t change.
/#/tab/designer/0

I have my tab declared properly in the app js.

.state('tab', {
  url: "/tab",
  abstract: true,
  templateUrl: "templates/tabs.html"
})
.state('tab.designer-detail', {
  url: '/designer/:designerId',
  views: {
    'tab-designer-detail': {
      templateUrl: 'templates/designer-detail.html',
      controller: 'DesignerDetailCtrl'
    }
  }
})

The kicker is, this only works when I ad the tab into the “templates/tabs.html”. Why? When its not listed it doesn’t work.
The basic tabs starter works just like this but somehow i missing something…

Thanks for any insight!

2

Your ‘tab’ state is a parent to each tab and so I presume it ‘owns’ the actual tab bar and controls navigation, so each tab must be declared in that file. In fact, you could probably have all the tabs and its parent in the same file if you like. (Though Im using a parent and separate templates for each tab by using a name attribute inside ion-nav-view inside each ion-tab).

3

Yeah I figured there was a one to one relationship for the tabs and that file, but it still wasn’t obvious why it was working in the tabs example, until now…

I was staring at the app.js file and noticed the tab name is the same between the 2 tabs in quesiton, everything else is different.

.state('tab.friends', {
  url: '/friends',
  views: {
    'tab-friends': {
      templateUrl: 'templates/tab-friends.html',
      controller: 'FriendsCtrl'
    }
  }
})
.state('tab.friend-detail', {
  url: '/friend/:friendId',
  views: {
    'tab-friends': {
      templateUrl: 'templates/friend-detail.html',
      controller: 'FriendDetailCtrl'
    }
  }
})

I guess its tied to the parent tab in that way so its not required in tabs.html. Good to know!

4

Are you referring to the fact that the states both start with “tab”? If so, then yes that’s the standard way of specifying the parent-child state relationship in ui-router - you just separate them with a . (period)