Chaning nav-bar classes on page loads

ionic-v1
21

There is actually a bug referenced for this. https://github.com/driftyco/ionic/issues/2732 It seems to be a beta14 bug according to the comments on this issue.

For those looking for a workaround until it’s fixed, you can achieve this by adding or removing manually the class from the ion-nav-bar element:

var element = angular.element(document.querySelector('ion-nav-bar'));
element.addClass('your-class');

If you want to change the class when changing views, you can listen to the event $stateChangeStart on the rootScope:

        $rootScope.$on('$stateChangeStart',
        (event, toState, toParams, fromState: any, fromParams): void => {
            // change class here
        });

Hope this helps

1 Like
22

I wasted many hours trying to make it work using ng-class. But its an exisiting issue which will be taken care in next big release.

As an alternative for now, you can just redeclare ion-navbar (with your custom class) html block in your view to overide the layout ion-navbar.

Hope it helps.

23

This here works like a charm:

1 . Create a main controller to take care of your index page and all views within it.
2. Add this function to the controller:

$scope.setNavColor = function(color){
    for(var i =0; i <  document.getElementsByTagName("ion-header-bar").length; i++){
      classNames = document.getElementsByTagName("ion-header-bar")[i].className;
      classNames = classNames.replace(/(bar-light|bar-stable|bar-positive|bar-calm|bar-balanced|bar-energized|bar-assertive|bar-royal|bar-dark)/g, color );
      document.getElementsByTagName("ion-header-bar")[i].className = classNames;
    }
  }

3 . add on-select to your ion-tab tab so it will call the function whenever your tab is chosen:
<ion-tab href="#addr" on-select="setNavColor('PUT_YOUR_COLOR_HERE')> </ion-tab>

4 . add on-deselect to you ion-tab too if you want the color to go back to some value when you leave.

5 . Have fun!

24

this solve the fucking issue for me, ng-class not working with ion-nav-bar, i been strugle with this for a while

25

For me it works to set ng-class on ion-nav-bar. I don’t use root scope but instead a variable on the controller scope on the menu/tab controller. Using root scope should work too though I think, but I haven’t tried it.

Controller:

	$scope.$on('$ionicView.beforeEnter', function() {
		$scope.nav_class = 'state-' + $state.current.name.replace('.', '-');
	});

Template:

	<ion-nav-bar class="bar-company" ng-class="nav_class">