bfredo123 bfredo123 - 6 days ago 5
AngularJS Question

per-page customization of the ion-nav-bar

I would like to change the

background-color
of the
ion-nav-bar
of my Ionic 1 single page application, depending on the currently displayed view.

Starting from the default ionic code generator, the skeleton of the app is in the menu.html file, and each page has its own HTML template, and its own controller.

How can I enforce the
ion-nav-bar
's
background-color
from either the HTML template or its controller?

btw, I have already successfully activated SASS if it may help.

Many thanks!

Answer


Well there are different ways to do this with Javascript. One way is

<ion-nav-bar ng-style="{'background-color': $root.backgroundColor}"> </ion-nav-bar>

Then in each view you want a different color, you could change the background color from the controller:

$rootScope.backgroundColor = 'yellow'

You could also use predefined classes that set the background color in css. Also change the class name in controller:

$rootScope.backgroundClass = 'yellow-bg'

<ion-nav-bar ng-class="$root.backgroundClass"> </ion-nav-bar>

or <ion-nav-bar ng-class="{$root.backgroundClass: true}"> </ion-nav-bar>

and in the css, define each background color with the respective class

.yellow-bg {background-color: yellow} .red-bg {background-color: red}

If you want, you could create a directive for this.

Comments