Global ion-nav-buttons

ionic-v1
1

Hello,

I have an ionic-side-menu template based project, using the same right buttons in the header bar in all screens. The header bar contains a shopping cart button and a profile button. What I’m doing now is including

<ion-nav-buttons side="right">
    <button  class="button button-icon icon ion-bag righthd-icon" ng-click="gotoCart();" ng-if="shopping_cart_enabled"></button>
    <button class="button button-icon icon ion-person righthd-icon"  ng-click="showUserOptions();"></button>
</ion-nav-buttons>

inside each ion-view I have, and taking care of calling the showUserOptions in each controller scope, which is not very smart. Is there anyway to avoid this redundancy, where should i put ion-nav-buttons to make it global across all states/screens.

1 Like
2

sorry guys, completely missed it, there is already a place for that

<ion-pane ion-side-menu-content drag-content="false">
    <ion-nav-bar class="bar-stable nav-title-slide-ios7 our_hederbar">       

        <ion-nav-back-button class="button-clear">
            <i class="icon ion-ios7-arrow-back"></i>&nbsp;
        </ion-nav-back-button>
 

        <ion-nav-buttons side="right">
            <button  class="button button-icon icon ion-bag righthd-icon" ng-click="gotoCart();" ng-if="shopping_cart_enabled"></button>
            <button class="button button-icon icon ion-person righthd-icon"  ng-click="showUserOptions();"></button>
        </ion-nav-buttons>
3

@yehiasalam

am facing this issue too, where did you put this code? in the index.html ? could a codepen or something be possible?

Thanks.

Controller in main tab?
4

usually you will have a MenuCtrl, responsible for all the navigation, the one with abstract: true:

.config(function($stateProvider, $urlRouterProvider, $httpProvider) {
  $stateProvider

  .state('app', {
    url: "/app",
    abstract: true,
    templateUrl: "templates/menu.html",
    controller: 'MenuCtrl'
  })

if you’re using this template https://github.com/driftyco/ionic-starter-sidemenu, the file is in templates/menu.html

5

Thanks, I got it to work.