Chaning nav-bar classes on page loads

ionic-v1
1

Is it possible to change the nav-bar class names when different pages are loaded?

2 Likes
2

Hey @vialware, I’m not sure what you mean. Can you you give an example or more info on what you are looking to do?

3

@max

for example on route1 the nav-bar class is bar-clear.
on route2 i’d like it to be bar-assertive.

here is my default setup in index.html

<nav-bar animation="nav-title-slide-ios7" type="bar-clear" back-button-type="button-icon" back-button-icon="ion-ios7-arrow-left"></nav-bar>

I was wondering if there was the ability to change the type depending on the route?

I hope i’m explaining my self better

4

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

Thanks!

5

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

6

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

7

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?

8

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.

9

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

10

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

11

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";
12

You need to to do it from $rootScope

13

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

14

Ok great, thank you @jazzfanatic and @Calendee!

15

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

16

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?

17

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
18

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.

19

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
20

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?