如何使用角度路由在当前状态下设置活动类？答案

【问题标题】：How to set active class on the current state using angular-route?如何使用角度路由在当前状态下设置活动类？
【发布时间】：2014-10-28 16:30:50
【问题描述】：

我的路线文件

app.config(["$routeProvider",function($route)
{
    $route.when("/",{
        templateUrl : "partials/index.html",
        controller : "AppCtrl"
    }).when("/contact",{
        templateUrl:"partials/contact.html",
        controller:"ContactCtrl"
    }).
    when("/about-us",{
        templateUrl:"partials/about.html",
        controller:"AboutCtrl"
    }).
    when("/gallery",{
        templateUrl:"partials/gallery.html",
        controller:"GalleryCtrl"
    }).
    otherwise({
        redirectTo:"/"
    });

}]);

在我的 header.html 部分中，我使用的是 HeaderCtrl 控制器

app.controller("HeaderCtrl",["$scope","$location",function($scope,$location)
{
    $scope.location=$location.path().replace("/","");
}]);

我的 header.html

<ul ng-controller="HeaderCtrl">
    <li ng-class="{active:location===''}"><a href="#">home</a></li>
    <li ng-class="{active:location==='about-us'}"><a href="#/about-us">about us</a></li>
    <li ng-class="{active:location==='gallery'}"><a href="#/gallery">gallery</a></li>
    <li ng-class="{active:location==='contact'}"><a href="#/contact">contact</a></li>
</ul>

当页面重新加载（实际刷新）时它可以工作，即活动类应用于相应的 li 但是当我更改路线时（通过单击菜单项）它不起作用

【问题讨论】：

那是因为当路由改变时你没有改变控制器中的$scope.location。
是的，我认为是这样，我该如何克服呢？

标签： angularjs angular-routing

【解决方案1】：

解决您的问题的方法是绑定一个在 URL 成功更改时更新 $scope.location 的事件。您不必将单击事件绑定到每个 <li> 元素。如果路由无效或失败怎么办？您不想向用户显示元素是活动路由，而实际上它不是。

如果您阅读$location 服务上的documentation，您将看到一个事件部分。我们感兴趣的是$locationChangeSuccess。要将其连接到您的控制器中，请执行以下操作：

$scope.$on('$locationChangeSuccess', function () {
  $scope.location = $location.path().replace('/', '');
});

【讨论】：

app.controller("HeaderCtrl",["$scope","$location","$locationChangeSuccess",function($scope,$location,$locationChangeSuccess) { $scope.$on( '$locationChangeSuccess', function () { $scope.location = $location.path().replace('/', ''); }); }]);我在这段代码中犯了什么错误？
你不需要注入$locationChangeSuccess。它不是一个模块。它是$location 服务的一部分。我发布的代码是您添加到您的控制器功能所需的全部内容。

【解决方案2】：

您将一些对象（如 active）添加到路由器并使用 ngClass 在您的 html 上设置条件

像这样：

app.config(["$routeProvider",function($route)
    {
        $route.when("/",{
            templateUrl : "partials/index.html",
            controller : "AppCtrl",
            active:'home',
        }).when("/contact",{
            templateUrl:"partials/contact.html",
            controller:"ContactCtrl",
             active:'contact',
        }).
        when("/about-us",{
            templateUrl:"partials/about.html",
            controller:"AboutCtrl",
             active:'about',
        }).
        when("/gallery",{
            templateUrl:"partials/gallery.html",
            controller:"GalleryCtrl"
            active:'GalleryCtrl',
        }).
        otherwise({
            redirectTo:"/"
        });

    }])
    //remember that add $route inside the scope 
    .controller("HeaderCtrl",["$scope","$location",function($scope,$route)
    {
      $scope.$route = $route;
      
    }]);

.active{
  color:#a33;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<ul ng-controller="HeaderCtrl">
    <li data-ng-class="{'active':$route.current.active === 'home'}"><a href="#">home</a></li>
    <li data-ng-class="{'active':$route.current.active === 'about'}"><a href="#/about-us">about us</a></li>
    <li data-ng-class="{'active':$route.current.active === 'gallery'}"><a href="#/gallery">gallery</a></li>
    <li data-ng-class="{'active':$route.current.active === 'contact'}"><a href="#/contact">contact</a></li>
</ul>

【讨论】：