Navigate directly to sub-tab

Here’s the scenario:

  1. I have a tab which shows a list of items and when you click on one it loads the single view for the item with the back button.
  2. This works great but sometimes I want to navigate directly to the single view of an item from another tab or part of the app. If I do this the back button doesn’t show up because the there is nothing in the navigation stack.

My question:
Is there a way to manually add to the navigation stack for a tab or something like that so that Ionic decides to add a back button? I realize this is not out of the box behavior for the app but maybe someone could point me in the right direction for a workaround. This is a must have for my app…

1 Like

Hmmmm… i’ll tell you my scenario and how i worked it out and maybe that would help you:

i have a tabs app that you can create and join chat rooms in it, but there are rooms where i am admin and rooms where i am just a normal user.
There is also a dashboard tab that show 2 lists of the most popular rooms of each category, and therefor 3 tabs (‘dashboard’ , ‘my rooms’ & ‘public rooms’’) so i create one room page in the templates folder called room-page.html :

<ion-view title="{{room.Name}}">
    <ion-content has-header="true" padding="true" >
        <ion-list id="item-list">
            <div class="card" ng-hide="ImAdmin" ng-repeat="user in room.Userse">
                <ion-item class="item item-text-wrap" type="item-text-wrap">
                    <h2>{{user.UserName}}</h2>
                     <p> Taken By {{showTalks(user)}}</p>  
                </ion-item>
            </div>

            <div class="card" ng-show="ImAdmin"  ng-repeat="user in room.Userse">
                <ion-item class="item item-text-wrap" type="item-text-wrap">
                    <h2>{{user.UserName}}</h2>
                     <p> Taken By {{showTalks(user)}}</p>  
                </ion-item>
            </div>
        </ion-list>
    </ion-content>
</ion-view>

the ng-show and ng-hide are set in the controllers accordingly.

in my app.js in the $stateProvider i have the 3 tabs :

.state('tab.dash', {
         url: '/dash',
         views: {
         'tab-dash': {
               templateUrl: 'templates/tab-dash.html',
               controller: 'DashCtrl'
                         }
             }
   })
 .state('tab.my-rooms', {
         url: '/my-rooms',
         views: {
         'tab-my-rooms': {
               templateUrl: 'templates/tab-my-rooms.html',
               controller: 'myRoomsCtrl'
                         }
             }
   })
  .state('tab.public-rooms', {
         url: '/public-rooms',
         views: {
         'tab-public-rooms': {
               templateUrl: 'templates/tab-public-rooms.html',
               controller: 'PublicRoomsCtrl'
                         }
             }
   })

and because there are 3 ways to get to one room i have 3 states with the proper path :

.state('tab.dash-room-page', {
         url: '/dash-room-page/:roomId',
         views: {
         'tab-dash': {
               templateUrl: 'templates/room-page.html',
               controller: 'RoomPageCtrl'
                         }
             }
   })
 .state('tab.my-rooms-room', {
         url: '/my-rooms-room/:roomId',
         views: {
         'tab-my-rooms': {
               templateUrl: 'templates/room-page.html',
               controller: 'RoomPageCtrl'
                         }
             }
   })
  .state('tab.public-rooms-room', {
         url: '/public-rooms-room/:roomId',
         views: {
         'tab-public-rooms': {
               templateUrl: 'templates/room-page.html',
               controller: 'RoomPageCtrl'
                         }
             }
   })

Notice that all 3 states have the same controller
and that they all lead to the same page (templates/room-page.html)…

So basicly i can get to one page from 3 different places … (where of course according to the RoomPageCtrl i see what needs to be seen but thats extra for what you asked i think…)

Hope this helpes :wink:

Regards,

FireBrand