Dynamic class for nav-bar is not propagated to header bar

Im using dynamic themes in an app, so i set the name of the theme in my app-controller and use the variable in my templates to set the correct class, like this

$timeout(function () {
	$rootScope.brandTheme = theme;
	$rootScope.brandThemeBar = "bar-" + theme;
});

and use it this way to set the sidemenu title bar, which works like I expect it to do

<ion-header-bar class="{{brandTheme}}">

But I also want to apply this to the title bar, which I try to do like this

<ion-nav-bar class="bar {{brandThemeBar}}">

It works basically, but the nav-bar-block div which is rendered inside the nav-bar only gets the initial class of it’s parent before the class is set (and won’t work when changed dynamically in the code).

ionic-angular.js line 5669

var headerBarEle = jqLite('<ion-header-bar>').addClass($attrs['class']).attr('align-title', alignTitle);

What would be the right fix for this issue? Should I (or we, being in the community) place a watcher for the parents classes here? I think this might be a bit costly and isn’t helpful for most situation (w/o dynamic theming). Or should we create a method to change the class of a nav-bar?

I’m puzzled and not quite sure how to fix it, and whether to fix it for myself or if it should be changed in the framework. I don’t know if other people will run into this.

For now i will solve it by manually changing the class on the ion-header-bar (both cached and active), but I think it might be a good fix for the framework :slight_smile:

$("ion-nav-bar .nav-bar-block ion-header-bar") .removeClass("bar-calm bar-positive bar-assertive bar-stable") .addClass($rootScope.brandThemeBar);

1 Like

True, I’m trying to accomplish this but so far I’ve only managed to change the ion-header-bar using pure javascript…

Did you find a solution for this?

Hi, i didn’t really found a good solution to this. So i did it through javascript.