I'm using Ionic directives as generated by Ionic Creator. At the top we have a standard nav-bar and tabbed navigation icons at the bottom. Each icon has a specific color and I want the navbar to match the color when clicked.
<ion-nav-bar class="bar-{{$root.color}}">
Firing on-select, I've tried to set $scope.color, $rootScope.color, and even created a function that returns the value of $rootScope.color.
<ion-tab title="Reps" icon="ion-person-stalker balanced" on-select="headerColor('balanced')">
With the code above, the css changes in the inspector but the new color is never applied or rendered. Anyone know a good way to work this in? I've also tried to $scope.$apply() but that just throws errors as other $digests are running.
Here's the app link https://irthos.github.io/medviz-admin/#/labs
Here's the index.html with the code https://github.com/irthos/medviz-admin/blob/master/www/index.html
Thanks!
This can be achieved by changing the color when switching states. I created a codepen that does just that:
http://codepen.io/cavanflynn/pen/VLBgEK
<ion-nav-bar class="bar-positive"
ng-class="{'bar-custom': secColor == '1',
'bar-custom2' : secColor == '2'}">
</ion-nav-bar>