Tough time with tabs component

ionic-v1
1

Greetings everyone, I’m having a tough time with the tabs component. I have a details view with 3 tabs each tab shows different attributes of the item here is the skeleton of the view

<ion-tabs>
  <ion-tab title="Details">
    <ion-view title="'Details'">
      <!-- View content -->
    </ion-view >
  </ion-tab>
  <ion-tab title="More details...">
    <ion-view title="'More details...'">
      <!-- View content -->
    </ion-view >
  </ion-tab>
  <ion-tab title="Even more details...">
    <ion-view title="'Even more details...'">
      <!-- View content -->
    </ion-view >
  </ion-tab>
</ion-tabs>

The issue with this is when I navigate to the /details/:id it shows the content of the details view but the title of the last tab, in this case “Even more details…”. What I doing wrong?

Tanks in advance!

3

I think the issue is that you have multiple ion-view tags. There is a good example here http://codepen.io/ionic/pen/HjnFx of using tabs with ui-router that has each tab content in a separate template. Doing it that way means that there is only one active ion-view per route.

Alternately if you don’t need the title to change you can modify your tab markup to be

<ion-tabs>
  <ion-tab title="Details">
      <!-- View content -->
      Details
  </ion-tab>
  <ion-tab title="More details...">
      <!-- View content -->
      More Details...
  </ion-tab>
  <ion-tab title="Even more details...">
      <!-- View content -->
      Even more details..
  </ion-tab>
</ion-tabs>

Pen showing this http://codepen.io/anon/pen/aoAjq

4

I already tried that approach, but I had issues with the router-ui because my routes are something like this:

item/:id/details
item/:id/moredetails
item/:id/evenmore

So I ended with something like this:

.state('item', {
            url: '/item/:id',
            templateUrl: 'templates/item-base.html', 
            controller: ItemController
        })
        .state('item.details', {
            url: '/details',
            views: {
                detailsTab: {
                    templateUrl: '...', 
                }
            }
        })
       ....

But I didn’t work in the way that I expected.

5

i want to do this too, have u got any solution?

6

maybe you can use a service and save the current object or id that you want check it out here http://stackoverflow.com/questions/20181323/passing-data-between-controllers-in-angular-js

and end with something like

app.service('itemService', function() {
  // Save the Id or the entire object itself
  this.data = {currentId: 0};

  this.setCurrent = function(id) {
        this.data.currentId = id;
  };

  this.setCurrent = function() {
        return this.data.currentId;
  };
});

Then access from your details / more details / even more details controllers something like

itemService.getCurrent();

Don’t know if is a good practice but seems that it can solve the issue…