Transitioning from one tab-detail to another tab-detail and going back

ionic-v1
1

Hi,

I’ve a problem that i’m struggling to find a solution. I’ve an exhibitions tab in my app, and a galleries tab. Every exhibition is in a gallery. So in a exhibition detail page, i’m also linking to the gallery. But when you click from exhibition detail to gallery detail, it switches to the gallery tab (which is ok for me), but there is no back button after that. So i can’t go back to the exhibitions page. And the worst thing about that is, i also can’t go back to main galleries page, so that one gallery detail page now becomes the main page of galleries tab.

What i want to accomplish is, after clicking from an exhibition detail to a gallery detail page, i wan’t to be able to go back to the exhibition detail page with a back button, and don’t want to lose gallery tab functionality. (clicking on gallery tab should open the galleries main page, or the state where i was before on that tab.

How can i solve this problem?

Thanks,
Alp

This is my tab controller:

<tabs tabs-style="tabs-icon-top" tabs-type="tabs-positive">
  <tab title="Exhibitions" icon="icon ion-ios7-calendar-outline" href="#/tab/exhibitions">
    <nav-view name="exhibition-tab"></nav-view>
  </tab>
  <tab title="Galleries" icon="icon ion-images" href="#/tab/galleries">
    <nav-view name="gallery-tab"></nav-view>
  </tab>
</tabs>

This is my stateprovider setup:

.state('tab.exhibitions', {
      url: '/exhibitions',
      views: {
        'exhibition-tab': {
          templateUrl: 'templates/exhibitions.html',
          controller: 'ExhibitionsIndexCtrl'
        }
      }
    })


 .state('tab.galleries', {
      url: '/galleries',
	  
      views: {
        'gallery-tab': {
          templateUrl: 'templates/galleries.html',
          controller: 'GalleriesIndexCtrl'
        }
      }
    })

Exhibition detail page:

<content has-header="true" has-tabs="true" ng-repeat="exhibition in exhibitions | filter:{id: exhibitionId}" >
  <div class='image-container' style='max-height:400px;overflow:hidden;background-color:#fff;'> <img src="{{ exhibition.featured_image }}" style="width:100%"> </div>
  <h3>{{exhibition.title}}</h3>
  <h4>
    <div class='opening_date'>{{exhibition.opening_time | amCalendar}} - {{exhibition.start_date  | amDateFormat:'D MMMM'}} / {{exhibition.end_date  | amDateFormat:'D MMMM'}}</div>
  </h4>
  <a href='#/tab/gallery/{{exhibition.gallery.slug}}' class='gallery_name'>{{exhibition.gallery.name}}</a>
  <p>{{exhibition.description}}</p>
</content>
2 Likes
2

Hi,

did you find any solution for the problem?

3

I have exatly same problem. Is there any one with the solution?

4

I have this problem as well. One approach I have used is to implement an “up” button (similar to a file system) rather than a “back” button on the detail screen. Exhibition Detail would always go to Exhibitions. Gallery detail would always go to Galleries. If you click from Exhibition Detail to Gallery Detail the top left button would still go to Galleries but clicking on the Exhibitions tab would get you back to the Exhibition Detail.

5

This is old post, but i faced similar problem and i created a simple solution.

I created a duplicate state & route (but unique name). This route with slightly different url pointing to same controller, receiving same params. It’s no longer switching tab and getting a nice back button. So to replicate your example:

.state('tab.galleriesToExhibition', {
      url: '/galleries/:id/Exhid/:exid',

      views: {
        'gallery-tab': {
          templateUrl: 'templates/galleries.html',
          controller: 'GalleriesIndexCtrl'
        }
      }
    })