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
$("ion-nav-bar .nav-bar-block ion-header-bar")
.removeClass("bar-calm bar-positive bar-assertive bar-stable")
.addClass($rootScope.brandThemeBar);