Working with SideMenu Header(s)

ionic-v1
1

The SideMenu starter template has all the ion-nav-bar layout in templates/menu.html

The menu seems to be attached to the Main App Controller.

I’m wondering if there is a way to dynamically alter the top nav bar based on the view/template you currently are on.

I know with ion-header-bar, it’s pretty straight forward, I just can’t seem to get things working with how the SideMenu starter is setup.

For example, after navigating to another view, I would like an additional button to appear in the header. That button needs an ng-click, with data passed from the current views controller (rather than the menu.html/MainApp controller).

2

I would add the button as usual but hidden. Then, listen for the $stateChangeSuccess event to add a class name.

JS

...
.config(function($stateProvider, ....) {
  $stateProvider
    .state('main', {...})
    .state('customstate', {})                   
 })
.controller('MenuHeaderCtrl', function($scope, $state) {
  $scope.currentState = $state.current.name;
  $scope.$on('$stateChangeSuccess', function(event, current) {
    $scope.currentState = current.name;
  });
 
 $scope.goto = function(){ ... }
});

HTML

<div ng-controller="MenuHeaderCtrl" class="state-{{currentState}}"> <!-- Or ionic nav bar directive -->
  <button class="normal-button>X</button>
  <button class="special-button" ng-click="goto()">Y</button>
</div>

CSS

.special-button{ display: none; }
.state-customstate .special-button{ display: inline-block; }

Hope it helps.

1 Like
3

Thank you ! The key was setting a nested ng-controller in menu.html, along with your suggestion for listening to state change.

        <ion-nav-buttons side="right" >
        <div ng-controller="OtherCtrl">
        <button class="state-{{currentState}} read-articles button button-icon button-clear ion-forward" ng-click="navigate('app.articles')">
            </button></div>
    </ion-nav-buttons>

Now my non-main app controller is setting the ng-click for navigate

4

The official way to add additional headerbar buttons is with the ion-nav-button directive.

http://ionicframework.com/docs/api/directive/ionNavButtons/

5

In slide menu like this:

  <ion-side-menu-content drag-content="false">
<ion-nav-bar class="bar-balanced">      
<ion-nav-back-button class="button-icon ion-ios-arrow-back" ng-click="goBack()"></ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()" ng-hide="$exposeAside.active"></button>
</ion-nav-buttons>
<ion-nav-buttons side="right" ng-if="$rootScope.esPerfil"> 
<button class="button button-icon button-clear ion-power" ng-click="salir()" id="new"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
</ion-side-menu-content>

Try to update “esPerfil” dynamic, and show button in header. In block run add:

$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
        $rootScope.esPerfil = false;
        if (toState.name == 'app.perfil') {
            $rootScope.esPerfil = true;
        }
});

But the new button in state app.perfil dont show. The value of esPerfil is correcty true.
What is lacking to update the header?

6

Solved like this:

<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-power" ng-click="salir()" ng-if="$root.esPerfil"></button>
</ion-nav-buttons>

ng-if in button, not in ion-nav-buttons