Search code examples
javascriptangularjsurl-routingangularjs-routingionic-framework

Ionic navigation tab in header

Hey i've got a question about ionic navigation,

The main navigation of my application is in the footer, but i want to add an information tab to the header, I also want this tab to have it's own view so i set it up as seen below 

 <ion-nav-bar class="bar-stable nav-title-slide-ios7">
  <ion-nav-back-button class="button-icon icon  ion-ios7-arrow-back">
    Back
  </ion-nav-back-button>
  <ion-nav-buttons side="right">
    <ion-tabs class="tabs-icon-top">

    <!-- Info Tab -->
    <ion-nav-view>
      <ion-tab title="Info" icon="icon ion ion-android-information" href="#/info/informatie">
        <ion-nav-view name="info-informatie"></ion-nav-view>
      </ion-tab>
     </ion-tabs>
    </ion-nav-view>


  </ion-nav-buttons>
</ion-nav-bar>

And I configured the Angular routing to an abstract class like this,

.state('info', {
  url: "/info",
  abstract: true,
  templateUrl: "templates/tabs.html"
})

    .state('info.informatie', {
        url: '/informatie',
        views: { 
            'info-informatie': {
                templateUrl: 'templates/info-informatie.html',
                controller: 'InfoCtrl'
            }
        }
    })

Now as far as i can tell this should do the trick, but the problems are that the tab doesn't show in the header, and also when i hardlink to the route it's stays on the same page without any kind of error...

i've made the templates, and configured the controllers.

I'm new with Angular as well as Ionic so it might be something quite easy but i can't figure it out.. i've read the manuals and the docs.

!!IMPORTANT NOTICE When i change the view to another one like 

.state('info.informatie', {
        url: '/informatie',
        views: { 
            'TAB-OMGEVING': {
                templateUrl: 'templates/info-informatie.html',
                controller: 'InfoCtrl'
            }
        }

it works, but the active state is placed on another tab and the history stack traces back to that tab which is not what I intend to do and i would rather do it right from the start then build an app with cheap fixes and wrong use of codes.

Can someone help me?

Solution

  • A few points, Im new to this too but hope Im of some help.

    1. I think your code should be in the nav-bar segment, nav-view should be left empty as its the place where your html populates
    2. use ui-sref instead of href..like <a ui-sref='info.informatie'>something</a>or alternatively use a button to employe ui-sref as well.
    3. because u use info.something, naturally your parent or base state is info state.