如何在AngularJS中发生路由更改时设置ngclass更改?

时间:2014-03-01 14:13:31

标签: javascript angularjs ngroute ng-view

我想在路线发生变化时在我的主.container班级上添加一个班级。

我目前的简单解决方案是在每个主菜单网址上都有一个ng-click(页面上没有其他网址):

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>

这似乎工作正常,只要我需要添加更多网址,问题是当用户没有点击任何链接并直接访问他没有获得主类的网址时。

有更好的方法吗?

1 个答案:

答案 0 :(得分:2)

您可以使用几个不同的选项,但我认为最简单的方法是通过查看$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作为底部示例,有几个不同的示例,说明您可以访问哪些类型的路径。