Chaning nav-bar classes on page loads

Did you ever figure this out? I want to do exactly this, too.

Thanks!

@benashman unfortunately the only way I was able to solve this was using jquery.

Did you try using ng-class and exposes $location.path() on the scope?

Could you try and set it up like you would the left and right buttons? Give it a type that you could change in your controllers.

<nav-bar type="myClass"></nav-bar>

Then somewhere in your controllers

$scope.myClass= "bar-positive";

$scope.myClass="bar-dark"

Would something like this work?

It wouldn’t because Ionic will just replace the header class with “myClass” instead of binding it to an Angular scope variable.

If the type attribute accepted an angular expression rather than a string it may be possible, but for now I think you’d need a custom directive.

Devs, please feel free to correct me if I’m wrong, as I want to change the header color depending on which tab/controller is in view as well.

Can you open an issue for this? Sounds like a good feature.

Done: https://github.com/driftyco/ionic/issues/599

I was just trying to do this and was excited to see this issue was resolved - what’s the syntax to get it working?

EDIT: I just saw this syntax on GitHub

<nav-bar type="{{myType}}">

However, when I put that in my index.html file and defined the myType variable within the scope for the controller on the page I wanted to set the color, it didn’t work and is showing up gray. Here’s my index code:

<nav-bar type="{{myType}}" 
         animation="nav-title-slide-ios7" 
         back-button-type="button-icon" 
         back-button-icon="ion-ios7-arrow-back"></nav-bar>

And here’s my scope controller code:

$scope.myType = "bar-assertive";

You need to to do it from $rootScope

That or if you are using a overall “main” controller, you can defined it there.

Ok great, thank you @jazzfanatic and @Calendee!

This doesn’t seem to work any more :o(

<ion-nav-bar type="{{headerBarClass}}" class="nav-title-slide-ios7"></ion-nav-bar>
$rootScope.headerBarClass = 'bar-clear';

no dice

Yeah - even just manually setting type="bar-assertive" for example, doesn’t work. Any advice on how to change nav bar colors for different pages in the current version?

after several hours with no solutions i created a directive to change the class, first add an id to the <ion-nav-bar> then write this

.directive('changeClass', function(){
return {
	restrict: 'E',
	scope: {
		cat: '='
	},
	link: function(scope, elem, attr) {
		var barra = angular.element(document.getElementById('barra-nota'));
		scope.$watch('cat', function(newValue, oldValue) {
            if (newValue) {
                barra.removeClass('bar-seccion-general');
				barra.addClass(newValue);
            }
        }, true);
	}
}

})

then call the directive from my view

<ion-view><change-class cat="categoria"></change-class></ion-view>

“categoria” is a variable in my controller like $scope.categoria

i know that is not the best approach but is the only solution that work for me, i hope it work for someone else

1 Like

If you don’t want to use a custom directive you can use:

<ion-nav-bar class="nav-title-slide-ios7" ng-class="$root.cls">

And then set the class you want from your controller:

.controller('YourCtrl', function($rootScope, $scope, $stateParams){
      $scope.$root.cls = "bar-assertive";
})

This way you can set a different class per state. Or change the class within a state.

Instead of setting a root scope variable in every controller (for when you don’t want the alternate color), I used the $stateChangeStart event. This works well for my few states that require a lighter nav bar.

<ion-nav-bar class="bar-positive nav-title-slide-ios7" align-title="center" ng-class="{'rp-bar-stable':lightNavBar}">
    <ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) { 
    if (_.indexOf(['state1', 'state2', 'state3'], toState.name) != -1) {
        $rootScope.lightNavBar = true;
    } else {
        $rootScope.lightNavBar = false;
    }
});
1 Like

Hey @mattrosno, this doesn’t seem to work when you use a nav-bar element within a sidemenu based project. The rootscope variable does change, but the nav-bar directive doesn’t pick up on the rootScope variable. Any idea how this can be fixed?

There is actually a bug referenced for this. https://github.com/driftyco/ionic/issues/2732 It seems to be a beta14 bug according to the comments on this issue.

For those looking for a workaround until it’s fixed, you can achieve this by adding or removing manually the class from the ion-nav-bar element:

var element = angular.element(document.querySelector('ion-nav-bar'));
element.addClass('your-class');

If you want to change the class when changing views, you can listen to the event $stateChangeStart on the rootScope:

        $rootScope.$on('$stateChangeStart',
        (event, toState, toParams, fromState: any, fromParams): void => {
            // change class here
        });

Hope this helps

1 Like

I wasted many hours trying to make it work using ng-class. But its an exisiting issue which will be taken care in next big release.

As an alternative for now, you can just redeclare ion-navbar (with your custom class) html block in your view to overide the layout ion-navbar.

Hope it helps.

This here works like a charm:

1 . Create a main controller to take care of your index page and all views within it.
2. Add this function to the controller:

$scope.setNavColor = function(color){
    for(var i =0; i <  document.getElementsByTagName("ion-header-bar").length; i++){
      classNames = document.getElementsByTagName("ion-header-bar")[i].className;
      classNames = classNames.replace(/(bar-light|bar-stable|bar-positive|bar-calm|bar-balanced|bar-energized|bar-assertive|bar-royal|bar-dark)/g, color );
      document.getElementsByTagName("ion-header-bar")[i].className = classNames;
    }
  }

3 . add on-select to your ion-tab tab so it will call the function whenever your tab is chosen:
<ion-tab href="#addr" on-select="setNavColor('PUT_YOUR_COLOR_HERE')> </ion-tab>

4 . add on-deselect to you ion-tab too if you want the color to go back to some value when you leave.

5 . Have fun!