Here is my problem.
I have two level of tabs:
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
…
.state('tab.profile', {
url: "/profile",
views: {
'tabprofile@tab': {
templateUrl: "templates/tab-profile.html"
}
}
})
where tabs.html is:
<ion-tabs class="tabs-dark tabs-bottom tabs-icon-only slide-right-left">
<!-- Home Tab -->
<ion-tab title="Dashboard" icon-off="ion-ios-home-outline" icon-on="ion-ios-home" ui-sref="tab.dash">
<ion-nav-view name="tabdash"></ion-nav-view>
</ion-tab>
<!-- Profilo Tab -->
<ion-tab title="PROFILE" icon-off="ion-ios-person-outline" icon-on="ion-ios-person-outline" ui-sref="tab.profile.campionati">
<ion-nav-view name="tabprofile" animation="slide-left-right"></ion-nav-view>
</ion-tab>
..
</ion-tabs>
The views inside the tab PROFILE:
<ion-tabs class="tabs-striped tabs-secondary tabs-top tabs-background-dark tabs-color-light">
...
<ion-tab title="PLAYERS" ui-sref="tab.profile.players">
<ion-nav-view name="profile-page"></ion-nav-view>
</ion-tab>
..
</ion-tabs>
Into profile-page can go three different views (list and two kind of details):
.state('tab.profile.players', {
url: '/players',
views: {
'profile-page@tab.profile': {
templateUrl: 'templates/profile/tab-players.html',
controller: 'PlayersCtrl'
}
}
})
.state('tab.profile.players-guest', {
url: '/guest/:id',
views: {
'profile-page@tab.profile': {
templateUrl: 'templates/calciatore/profile-guest.html',
controller: 'PlayerProfileCtrl'
}
}
})
.state('tab.profile.players-personal', {
url: '/personal/:id',
views: {
'profile-page@tab.profile': {
templateUrl: 'templates/calciatore/profile-personal.html',
controller: 'PlayerProfileCtrl'
}
}
})
From outside page (outside from two level of tabs), I would like to insert an ui-sref to nested profile page, like this:
<button class="button button-block button-royal button-rounded" ui-sref="tab.profile.players-guest({ id: 2})">
Why ui-router drive me to ‘tabdash’ tab page? (It’s the first tab of the upper level tabs)
Please help me.
Thanks so much
Danilo