CODEWITHSUNDEEP
javascriptangularjstabsnestedionic-framework
Norrec
Norrec

Reputation: 553

Ionic/Angularjs nested tabs issue

I'm having a bit of an issue trying to get my app navigation working. I have a set of tabs nested inside another set of tabs. However when I click on the high level tabs for main navigation, I try to set it to the first view inside the second level tabs, however it seems to iterate over all the tabs twice, and ends on the last tab.

Here's my codepen: http://codepen.io/anon/pen/MYWvgj?editors=101

Main Level Tabs:

<ion-tabs class="tabs-icon-top tabs-positive">
        <ion-tab title="Home" icon="ion-home" ui-sref="tabs.home">
            <ion-nav-view name="home-tab"></ion-nav-view>
        </ion-tab>
        <ion-tab title="About" icon="ion-ios7-information" ui-sref="tabs.about.page1">
            <ion-nav-view name="about-tab"></ion-nav-view>
        </ion-tab>
</ion-tabs>

Second Level Tabs:

<ion-tabs class="tabs-striped tabs-top tabs-background-stable">
          <ion-tab title="Page 1" ui-sref="tabs.about.page1" on-select="page1()">
            <ion-nav-view name="about-page"></ion-nav-view>
          </ion-tab>

          <ion-tab title="Page 2" ui-sref="tabs.about.page2" on-select="page2()">
            <ion-nav-view name="about-page"></ion-nav-view>
          </ion-tab>
  </ion-tabs>

About views:

<script id="templates/about-page1.html" type="text/ng-template">
    <ion-view title="About Page 1">
        <ion-content class="padding has-tabs-top">
            About Page 1
        </ion-content>
    </ion-view>
</script>

<script id="templates/about-page2.html" type="text/ng-template">
    <ion-view title="About Page 2">
        <ion-content class="padding has-tabs-top">
            About Page 2
        </ion-content>
    </ion-view>
</script>

And here's the important states:

.state('tabs.about', {
    url: "/about",
    abstract: true,
    views: {
        'about-tab': {
            templateUrl: "templates/about.html"
            controller: "tabController"
        }
    }
})

.state('tabs.about.page1', {
    url: "/page1",
    views: {
        'about-page': {
            templateUrl: "templates/about-page1.html"
        }
    }
})

.state('tabs.about.page2', {
    url: "/page2",
    views: {
        'about-page': {
            templateUrl: "templates/about-page2.html"
        }
    }
});

The example I'm talking about is click the 'About' tab, it's set to render page 1, but for some reason it always ends up on page 2 and I'm not sure why. Does anyone have any idea what I'm doing wrong?

Thanks!

Upvotes: 2

Views: 1596

Answers (1)

Bambo Oyelaja
Bambo Oyelaja

Reputation: 31

.state('tabs.about.page2', {
    url: "/page2",
    views: {
        'about-page': {
            templateUrl: "templates/about-page2.html"
        }
    }
});

You repeated the about-page for page 1 and 2. Do this for the page 2 state

.state('tabs.about.page2', {
    url: "/page2",
    views: {
        'about-page2': {
            templateUrl: "templates/about-page2.html"
        }
    }
});

Upvotes: 1

Related Questions