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

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -