How do I have a ion-tabs inside ion-nav-view

Question

I just started with Ionic, and I have an application to build that works like this:

An initial page shows up, with a list of items, when the user clicks on an item, a new window opens with ion-tabs inside it.

I'm populating ion-nav-view dynamically. I built an extremely simple version of this for testing purposes. Can anyone help me out to achieve the aforementioned functionality?

Problems:

The main content of the 'main.html' page is hidden behind the nav-header
The 'Tabs' page does not even open up when I click the button
Even when I forcefully open the tabs page by navigating to #/tabs, they don't show up.

Can someone help me out here? I'm totally lost.

Thanks in advance!

HTML:

<body ng-app="starter">

<ion-nav-bar class="bar-positive" align-title="center">
  <ion-nav-back-button class="button-clear">
  </ion-nav-back-button>
</ion-nav-bar>

<ion-nav-view>
    Loading
</ion-nav-view>

App. js Routes:

$stateProvider
  .state('main', {
      url: '/main',
      templateUrl: 'templates/main.html'
  })
  .state('tabs', {
      url: '/tabs',
      templateUrl: 'templates/tabs.html'
  })

$urlRouterProvider.otherwise('/main');

Main.html:

<ion-content>
    Hey There
    <button class="button button-dark" ng-href="#/tabs">
        Click Me
    </button>
</ion-content>

Tabs.html:

<ion-tabs class="tabs-balanced">
    <ion-tab title="Hey"></ion-tab>
    <ion-tab title="There"></ion-tab>
</ion-tabs>

Maybe have a look at this codepen: codepen.io/ionic/pen/odqCz, that example helped me with the logic when I was new to Ionic. — novalain
@novalain Hey, I did see that on their website, but my problem is, the tabs are not on the root of the application. They work when they are :/ — siddhant

novalain novalain · Accepted Answer · 2015-06-16T19:55:25

I'm not sure that <ion-tabs> are the right way to go in that case. Their purpose is to act as an abstract state at the root which controls the navigation of the whole app. You can read about them in more detail in an article here

If you want "tabs" at a different place in the application you could consider just using a button or a link that navigates to the right state such as:

<a ui-sref="Your state here"></a>

How do I have a ion-tabs inside ion-nav-view

1 Answers