Changing nav-bar color from one view to another by setting a class

ionic-v1
1

Hey there,

I would like to change the color of the ion-nav-bar to a different color depending on the state of the app.

I considered using a scope variable in the class, like: <ion-nav-bar class="bar-positive nav-title-slide-ios7 {{NavBarColor}}"> and passing a variable from the controller, but since ion-nav-bar is in index.html and not a partial, it won’t register. Anybody know of a way around this?

2 Likes
2

Have you tried looking into ng-class?

look at: this stackoverflow question and angular ng-class docs.

EDIT:
@coen_warmer
Try this:
In your html files:

<ion-nav-bar ng-class="{' bar-dark' : barColor == 'dark'}">...</ion-nav-bar>

In the respective controller:

$scope.barColor = 'dark';
3

Hey @pbernasconi, thanks. Unfortunately this means I have to tie a separate controller to ion-nav-bar since ion-nav-bar is in index.html and not in a partial. I’m looking for a way to set the color of the nav bar on a per state basis. Do you know of a way to do that?

4

I’m checking with the Ionic devs on this. See what kind of ideas we can come up with. I’m thinking it might be good to have $ionicNavBarDelegate have a public method to change the bar color.

5

@calendee That’d be amazing.

6

Andy to the rescue. I never knew about this method:

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

Then, in each controller :

$scope.$root.cls = "bar-assertive"
6 Likes
7

Fantastic! Going to check this out tomorrow.

8

Hey. This method stopped working for me after beta 14. Anybody know why or how to fix it?

9

Hi! This doesn’t work anymore on Beta14. Is there a workaround please?

10

As a work around, you can declare an “ion-nav-bar” directive in each of your views as per the “Alternate Usage” section of: http://ionicframework.com/docs/api/directive/ionNavBar/

Using the sidemenu template as an example:

  • in menu.html remove the “ion-nav-bar” directive

  • in playlists.html add a “ion-nav-bar” directive after the “ion-view” directive (and before the “ion-content” directive):

      <ion-nav-buttons side="left">
      <button class="button button-clear button-icon ion-navicon" 
         menu-toggle="left">
      </button>
  </ion-nav-buttons>

in playlist.html add a “ion-nav-bar” directive after the “ion-view” directive (and before the “ion-content” directive):

<ion-nav-bar class="bar-energized">
    <ion-nav-back-button class="button button-clear">
        <i class="ion-chevron-left"></i> Back
    </ion-nav-back-button>
</ion-nav-bar>
11

copying ion-nav-bar into all your views is not DRY, but it works. i wish you could set the class through ion-view in a similar manner as view-title.

<ion-view view-title="Keep Calm" navbar-class="bar-calm"> ... </ion-view>
1 Like
12

Placing an ion-nav-bar in each view does work but causes some nasty flashing on view transitions in beta 14. Any other solutions to this issue?

13

+1 Also having this. Any better work arounds?

14

I created a directive and used the states names as part of a class. Then on the styles, the background is applied to the bar using those custom classes based on the states.

Idea in action
1 Like
15

Love it. You could use it to pick up variables set in your router, or from your controller as well. Thanks @joseadrian!

16

I’ve tried the code on side-menu, but it doesn’t seem to change the colours. Have anyone tried?

17

@joseadrian This method doesn’t work with default ionic’s class.

I need just one state with “bar-clear”, all of other states are ‘assertive’ theme.

By the way, thanks for your help.