angular ui router - Shared views in ionic framework -
i have 1 template 'song-detail' want access 2 other parts of application. however, can use nav history first one.
i want access 'song-detail' both browse nav view, , favourites nav-view. can access fine both, 'back' history tabs.browse.
is possible nav history when sharing single 'song-detail' view this?
.state('tabs', { url: '/tab', abstract: true, templateurl: 'templates/tabs.html' }) .state('tabs.browse', { url: '/browse', views: { 'tab-browse': { templateurl: 'templates/tab-browse.html', controller: 'browsectrl' } } }) .state('tabs.song-detail', { url: '/songs/:song_id', views: { 'tab-browse': { templateurl: 'templates/song-detail.html', controller: 'songdetailctrl' } } }) .state('tabs.fav', { url: '/fav', views: { 'tab-fav': { templateurl: 'templates/tab-fav.html', controller: 'favctrl' } } }) .state('tabs.fav-detail', { url: '/songs/:song_id', views: { 'tab-fav': { templateurl: 'templates/song-detail.html', controller: 'songdetailctrl' } } })
i guess have missed abstract state:
.state('tab', { url: "/tab", abstract: true, templateurl: "templates/tabs.html" })
then you'll have tabs container (tabs.html):
<ion-tabs class="tabs-icon-top tabs-color-active-positive"> <ion-tab title="status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/browse"> <ion-nav-view name="tab-browse"></ion-nav-view> </ion-tab> ... </ion-tabs>
you have change last state:
.state('tabs.fav-detail', { url: '/fav/:song_id', views: { 'tab-fav': { templateurl: 'templates/song-detail.html', controller: 'songdetailctrl' } } })
notice url: url: '/fav/:song_id'
and tab-fav.html:
notice have link href="#/tab/fav/{{song.id}}
.
everything should work expected.
Comments
Post a Comment