Ionic - Set Navbar Class to bar-assertive not working - ionic-framework

Question

Your system information:
Cordova CLI: 6.0.0
Ionic Version: 1.2.4
Ionic CLI Version: 1.7.14
Ionic App Lib Version: 0.7.0
OS:
Node Version: v5.5.0
<ion-view view-title="Change Header" class="bar-assertive">
<ion-content>
<ion-list>
<ion-radio ng-model="color" ng-value="'bar-stable'">Stable</ion-radio>
<ion-radio ng-model="color" ng-value="'bar-assertive'">Assertive</ion-radio>
<ion-radio ng-model="color" ng-value="'bar-calm'">Calm</ion-radio>
</ion-list>
<span ng-bind="color"></span>
</ion-content>
</ion-view>
As you can see the code above, I add class="bar-assertive" to ion-view tags, and the navbar should change color to red, but the result remain the same with previous. There's no change in background-color of the navbar

Answer 1

You can set the nav-bar-color in your index with this code:
<ion-nav-bar class="bar-assertive"></ion-nav-bar>
<ion-nav-view></ion-nav-view>
If you need to customize nav-bar (i.e. apply a specific class) add an <ion-nav-bar> tag inside the <ion-view> you want with a custom nav bar:
<ion-nav-bar align-title="right" class="bar-positive">...</ion-nav-bar>
Here is an example: http://codepen.io/beaver71/pen/XXeydY
But if you want to set different color for each tabs/view you could also use ngClass and $stateChangeSuccess:
<ion-nav-bar ng-class="headerClass"></ion-nav-bar>
<ion-nav-view></ion-nav-view>
In your app (in run section) you have to set $scope.headerClass according to the current state:
.run(function($state, $rootScope) {
$rootScope.$on('$stateChangeSuccess', function (evt, toState) {
if (toState.name == "xyz") {
$rootScope.headerClass = 'bar-positive';
} else {
$rootScope.headerClass = 'bar-assertive';
}
});
})