CODEWITHSUNDEEP
angularjscss
GeekOnGadgets
GeekOnGadgets

Reputation: 959

Add/Remove CSS Class on Route Change in Angularjs

I am not sure how this can be achieved in Angular. I want to add and remove CSS class on route change. I am trying to Show and Hide vertical menu. Currently I am using ui-route. Any Suggestion or link to example would be appreciated or any other suggestion on different approach to my problem is also welcome

Upvotes: 3

Views: 5211

Answers (3)

Marius Wsl
Marius Wsl

Reputation: 21

Try this:

app.run(function ($rootScope) {
  $rootScope.$on("$stateChangeStart", function(event, toState, fromState){

    if (toState.url === "/path") {
        $('div').addClass('className');
    } else {
        $('div').removeClass('className');
    }

  });
});

Upvotes: 2

ProLoser
ProLoser

Reputation: 4616

Easiest and most efficient way:

angular.module(...).run(function($rootScope, $state) {
  $rootScope.$state = $state;
});

<div ng-if="$state.contains('someState')">...</div>

This will remove the DOM which will improve performance if the menu has lots of bindings.

However, I constantly tell people to consider leveraging named views for navigation:

<body>
  <nav ui-view="nav"></nav>
  <div class="container" ui-view></div>
</body>

$stateProvider.state('home', {
  views: {
    'nav@': {
       templateUrl: 'nav.html'
     }
     '': {
       // normal templateUrl and controller goes here.
     }
  }
});

The cool part about this is that children states can override and control what nav file to use, and can even setup resolves and controllers that share data between the nav and the content. No directives/services needed!

Finally, you can do these too:

<nav ng-show="$state.contains('somestate')"></nav>
<nav ng-class="{someClass:$state.contains('somestate')}"></nav>

Alternatively checkout ui-sref-active

All of my suggestions primarily assume you're using UI-Router since it's the best!

Upvotes: 3

Tomer
Tomer

Reputation: 4481

You can register the route changed and add this css to your DOM:

$rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
     // Add your logic, for instance:
     $('body').addClass('hide-menu');
});

Obviously there are events raised before the route has been changed: "$locationChangeStart", here.
/Edit/ - Better approach
Also I would rather using the ng-class attribute and simple bind a certain value from your main controller to it.

app.controller('MainController', function ($scope) {
    $scope.toggleMenu = function(isToShow) {
        $scope.isVisibleMenu = isToShow == true;
    }; 
});

then in your html:

<!-- Menu toggle button-->
<button ng-click="toggleMenu()"></button>

<div class="toggleable-menu" ng-class="{'visible-menu': isVisibleMenu}">
<!-- The menu content-->
</div>

and the simplest CSS possbile (you can obviously add animations or any other thing to toggle this menu.)

.toggelable-menu {
    display: none;
}

.toggelable-menu.visible-menu {
    display: block;
}

Upvotes: 1

Related Questions