How to setup ngclass change when route change occurs in AngularJS?

Question

I am trying to add a class on my main .container class when the route changes.

My current simple solution involves an ng-click on every main menu url (no other urls on the page):

app.controller('MainCtrl', ['$scope', function( $scope ){

  $scope.setMain = function( value ){ $scope.isMain = value };

}]);

Then in my html:

<div ng-controller="MainCtrl" class="container" ng-class="{'main': isMain}">
  <ul class="main-menu">
    <li><a href="#" ng-click="setMain(true)"></li>
    <li><a href="#/page-1" ng-click="setMain(false)"></li>
    <li><a href="#/page-2" ng-click="setMain(false)"></li>
  </ul>
  <div ng-view></div>
</div>

This seems to work ok as long as I need to add any more urls the problem is when a user does not click on any of the links and directly accesses a url he does not get the main class.

Is there a better way to do this?

When you say "directly accesses a url", do you mean they type into the address bar, the route programmatically changes, or something else entirely? — maf748, Mar 01 '14 at 14:19

score 2 · Accepted Answer · answered Mar 01 '14 at 14:22

2

You could use a few different options, but I think the easiest for you would be to setup the $scope.isMain value on controller initialisation by looking at $location. So inside the controller you could have something like:

var loc = $location.path();
if(loc === /* some route rule you require */){
    $scope.isMain = true;
}

Have a look here: http://docs.angularjs.org/api/ngRoute/service/$route as the example down the bottom has a few different examples of what sort of data you can access with regards to the route.

answered Mar 01 '14 at 14:22

Matt Way

32,319
10
79
85

I thought of using the route params but this means I have to load the same controller for every view. Correct me if I'm wrong but if I want to use a separate controller for one of the views I would have to set up some kind of service to share the route. – hitautodestruct Mar 02 '14 at 13:33
Or you could create a parent controller that handles the state based on route, and have separate child controllers. – Matt Way Mar 02 '14 at 15:38
Good idea. Is this what you meant by in your answer? – hitautodestruct Mar 04 '14 at 07:56
Yeah. I use common parent controllers all the time. – Matt Way Mar 04 '14 at 13:50

How to setup ngclass change when route change occurs in AngularJS?

1 Answers1