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?

Answer 1

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.