Single ion-nav-bar for multiple views

ionic-v1
#1

Hi,

I am trying to create a base header for all of my views but unable to do that. My main controller have following markup

 <body ng-app="ionicApp">
        <div id="dvMain" ng-controller="MainCtrl">
              <ion-nav-view>
              </ion-nav-view>
          </div>
 </body>

and my child controllers have following

<ion-nav-bar class="bar bar-danube">
  <ion-nav-buttons side="left">
    <button class="button button-icon ion-navicon" ng-click="leftButtonTap()">        
     </button>
  </ion-nav-buttons>
</ion-nav-bar> 
<ion-view title="{{ secInfo.Title}}"><ion-content has-header="true" padding="true" has-bouncing="true">
   <div class="list">
   </div>
</ion-content>
</ion-view>

I have tried to put ion-nav-bar in main controller with no luck. Can some one please guide, I would like to have one header throughout all views.

#2

Anyone there up for help ???

#3

Your <ion-nav-bar> generally should be outside the view. Having the <nav-buttons> inside each view gives you the chance to manage them individually if necessary. Like this : http://codepen.io/calendee/pen/ubzDq

However, if you want a single unified nav bar against ALL views, then do this: http://codepen.io/calendee/pen/hIkoJ/

#4

You are such a saver man. Thanks … It works

#5

If you want to put template in a sub directory, this is what you should do :

www
|_ index.html
|_ tmpl
| |_ page1.tmpl
| |_ page2.tmpl
| |_ page3.tmpl
|_ js
  |_ app.js

app.js :

angular.module('ionicApp', ['ionic'])

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
  .state('page1', {
    url: '/1',
    templateUrl: 'tmpl/page1.html'
  })
  .state('page2', {
    url: '/2',
    templateUrl: 'tmpl/page2.html'
  })
  .state('page3', {
    url: '/3',
    templateUrl: 'tmpl/page3.html',
    controller : "Page3Ctrl"
  })

  $urlRouterProvider.otherwise("/1");
})

.controller('Page3Ctrl', function($scope) {

})

In the template you have to remove the script at the beginning of the file.

  <!-- The title of the ion-view will be shown on the navbar -->
  <ion-view title="Page 1" hide-back-button="true">
    <ion-content class="padding">
      <!-- The content of the page -->
      <a class="button" ui-sref="page2">Go To Page 2</a>
    </ion-content>
  </ion-view>

And that’s all !

#6

A unified navbar does not work for me in nested views. Looks like the <ion-nav-view> tag kills this functionality some how.

I am trying to define a single container like view, where I want to define the navbar and some other things once. Then there is a ion-nav-view tag, where I want to load the nested views. All nested views should have the same navbar.

This sounds like it’s the same like in the example above, but one state deeper in the hierarchy.

Sorry for reviving this old post, but couldn’t find another related one.