Как настроить изменение ngclass, когда изменение маршрута происходит в AngularJS?

Question

Я пытаюсь добавить класс на моей главной .container класс, когда маршрут меняется.

Мое текущее простое решение включает в себя ng-click в каждом главном меню (нет других URL на странице):

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

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

}]);

Тогда в моем 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>

Кажется, это работает нормально, пока мне нужно добавить еще URL-адреса, проблема в том, что пользователь не нажимает ни на одну из ссылок и напрямую обращается к URL-адресу, который он не получает в основном классе.

Есть лучший способ сделать это?

Answer 1

Вы можете использовать несколько разных опций, но я думаю, что вам будет проще настроить $scope.isMain значение при инициализации контроллера, глядя на $location, Так что внутри контроллера вы можете получить что-то вроде:

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

Посмотрите здесь: http://docs.angularjs.org/api/ngRoute/service/$ route. В приведенном ниже примере есть несколько разных примеров того, к какому типу данных вы можете получить доступ в отношении маршрута.