Multiple Tab Views Issue

ionic-v1
1

Hi everyone,

I’m starting to switch my app to Ionic Framework. Great work so far guys!

I’m having an issue with multiple states with tabs and views. I don’t know much about moving this to codepen or I would do that, but here is the ZIP of my project. It’s a modified version of the ionic start side menu project.

Link to ZIP

If you have node, you can run the included minimized web browser via command line, easily enough.

How to reproduce:

  1. Start page Welcome
  2. Click button “Logged In Checked In”
  3. Click right menu open
  4. Click Tabs
  5. Click through tabs
  6. Open right menu
  7. Click Tabs2
  8. Even though URL is Tabs2, Tabs is being displayed

Forgot to include another little bug:

When clicking through the tabs, the title in the nav bar isn’t changing each time. It’s random on when the title gets updated.

1 Like
2

Anyone able to download and give my project a quick run? Is it something in Ionic or my route configuration that is messing with the multiple tab states? Thanks.

3

hi ,
check this codepan and compere it to yours.

http://codepen.io/itamarCohen/pen/yygvrZ

4

This example isn’t really comparable to mine. I’m using side menu + tab + tab2, where this is just 1 tab with multiple states.

When I have 1 tab state, everything works fine it seems, when I added the 2nd tab state, is when there’s an issue.

5

please provide a codepan with your code .

6

I’ve forked it and modified to be like mine:

See the Pen Tabs And Navigation: Nightly by Scott Nelson (@ScottN) on CodePen.

7

hi,
it a problem with the 3rd nested views with @ ,
as i now you have to choices,

  1. rewrite you state code the each tab gets a new state like you sew in my codepan.

  2. set the ionic config max cache to 0 like

    $ionicConfigProvider.views.maxCache(0);

8

Thanks for your reply.

I’ve modified the codepen to use individual states for the tab pages, the app runs but now there are no content on any tab pages and still the problem exists that when navigating to the 2nd tab page, it’s rendering the 1st tab page instead and links only work for the 1st.

Can you see an issue still with my code or is it an Ionic issue?

9

So the issue is how you your states defined.

Notice how tab1 and tab2 are setup as abstract states and I also update the names of the home,about, and settings states.

So How you had it before was actually the correct out put for what your code was like.
Since the view that setup each ion-tabs only had nav-views, it didnt really have any content to display, which is why it was blank.

10

That was it. Thank you!

11

I’m having another little quirk. Is it ok if I continue on this thread for others to follow in the future?

I’ve forked the codepen you did and modified it. Take a look at the link below.

  1. I’ve added a “Details” state
  2. I’ve created a button on Welcome page that navigates to this state
  3. When you click it, it navigates fine and introduces a “back” button to Welcome on the top
  4. Click Tabs and then click “Details”
  5. The navigation to “Details” happens but no “back” button is at top

Any ideas? Here is codepen:

See the Pen Multi-Tabs And Side-Menu: Nightly by Scott Nelson (@ScottN) on CodePen.

12

I had a similar problem and it took me a while to figure it out so sharing in case it happens to someone else.

I defined by mistake the abstract: true parameter inside the menuContent, meaning:

.state('app.tabs1', {
  url: "/tabs1",
  views: {
    'menuContent': {
      abstract: true,
      templateUrl: "templates/tabs1.html",
      controller: 'Tabs1',
    }
  }
})

Instead of (correct below):

.state('app.tabs1', {
  url: "/tabs1",
  abstract: true,
  views: {
    'menuContent': {
      templateUrl: "templates/tabs1.html",
      controller: 'Tabs1',
    }
  }
})

The wrong code was actually working fine with one set of tabs only, but not when there are multiple menus with tabs (like in this example), only the first set of tabs opened would display.