Navigation Bar with Header Buttons

ionic-v1
1

Hello,

I’d like to have a navigation bar (that provides me back-button functionality to return from nested tabs) as well as header buttons for opening up modals/etc.

When I try to do this on Ionic’s Cordova Seed Project, I notice that I do not see the header buttons – just the navigation back button. If I had to guess, ion-nav-bar seems to take precedence over ion-header-bar.

Here’s a (hardly) modified pet-index.html to show this precedence:

<!-- 
  This template gets placed in the Pet tab's <ion-nav-view> directive.
  It was wired up in the app config (app.js) 
  The 'pets' data comes from its $scope within PetIndexCtrl (controller.js)
-->
<ion-view title="'Pet Information'">

<ion-header-bar
  title="headerTitle"
  left-buttons="leftButtons"
  right-buttons="rightButtons"
  type="bar-positive"
  align-title="center">
</ion-header-bar>

  <ion-content has-header="true" has-tabs="true">

    <ion-list>

      <ion-item ng-repeat="pet in pets" type="item-text-wrap" href="#/tab/pet/{{pet.id}}">
        <h3>{{pet.title}}</h3>
        <p>{{pet.description}}</p>
      </ion-item>
      
    </ion-list>

  </ion-content>
</ion-view>

In part to prove my sanity, here is what I’ve defined as leftButtons and rightButtons:

// A simple controller that fetches a list of data from a service
.controller('PetIndexCtrl', function($scope, PetService) {

	$scope.headerTitle = "Pet Information"
	$scope.leftButtons = [{ 
	  type: 'button-clear',
	  content: 'Left Button',
	  tap: function(e) {
	    $location.path("/");
	  }
	}];
	$scope.rightButtons = [{ 
	  type: 'button-clear',
	  content: 'Right Button',
	  tap: function(e) {
	    $location.path("/");
	  }
	}];

  // "Pets" is a service returning mock data (services.js)
  $scope.pets = PetService.all();
})

Is there a way to get both a navigation bar as well as specific header buttons for different tabs?

Thanks!

2

I have this Issue (737) opened to ask the devs to support left-buttons and right-buttons in tabs.

3

Thanks Calendee!

I see that your post also links to a previous issue:

Adam Bradley suggests that a current workaround is to have your own “Go Back” button. Is this the cleanest fix for the time being? Seems I can get buttons to show up so long as I remove the ionView directive.

4

I don’t see where Adam is suggesting that, but that is actually what I’d like to be able to accomplish with the left-buttons. I can’t make them work on tabs.

5

Hi Calendee,

Adam replied to issue 612 with this suggestion. However, I think we are talking about two different issues.

I am having issues getting ionHeaderBar leftButtons to show up when used with an ionView directive. Sounds like you are binding leftButtons to ionTab.

Here’s how I made leftButtons work:

Assuming I am in Ionic’s Cordova Seed, I leave tabs.html alone. Here’s a snippet:

  <!-- Pets Tab -->
  <ion-tab title="Pets" icon="icon ion-home" href="#/tab/pets">
    <ion-nav-view name="pets-tab"></ion-nav-view>
  </ion-tab>

In pet-index.html, I remove the ionView directive, but add an ionHeaderBar directive and bind leftButtons to the template. My full file looks like this:

<!-- 
  This template gets placed in the Pet tab's <ion-nav-view> directive.
  It was wired up in the app config (app.js) 
  The 'pets' data comes from its $scope within PetIndexCtrl (controller.js)
-->

<ion-header-bar
  title="headerTitle"
  left-buttons="leftButtons"
  right-buttons="rightButtons"
  type="bar-positive"
  align-title="center">
</ion-header-bar>

  <ion-content has-header="true" has-tabs="true">

    <ion-list>

      <ion-item ng-repeat="pet in pets" type="item-text-wrap" href="#/tab/pet/{{pet.id}}">
        <h3>{{pet.title}}</h3>
        <p>{{pet.description}}</p>
      </ion-item>
      
    </ion-list>

  </ion-content>

I then defined leftButton and rightButton in my controller:

// A simple controller that fetches a list of data from a service
.controller('PetIndexCtrl', function($scope, PetService) {

	$scope.headerTitle = "Pet Information"
	$scope.leftButtons = [{ 
	  type: 'button-clear',
	  content: 'Left Button',
	  tap: function(e) {
	    $location.path("/");
	  }
	}];
	$scope.rightButtons = [{ 
	  type: 'button-clear',
	  content: 'Right Button',
	  tap: function(e) {
	    $location.path("/");
	  }
	}];

  // "Pets" is a service returning mock data (services.js)
  $scope.pets = PetService.all();
})

This works only when I do not use the ionView directive but this means I won’t be able to implement the history navigation “back” button (I understood this depends on ionView)