使用AngularJS设置活动标签样式

Question

我在AngularJS中设置了这样的路由：

$routeProvider
    .when('/dashboard', {templateUrl:'partials/dashboard', controller:widgetsController})
    .when('/lab', {templateUrl:'partials/lab', controller:widgetsController})

我在顶部栏上有一些链接的标签样式。如何根据当前模板或URL将“活动”类添加到选项卡？

Answer 1

一种无需依赖URL即可解决此问题的方法是在$routeProvider配置过程中向每个部分添加自定义属性，如下所示：

$routeProvider.
    when('/dashboard', {
        templateUrl: 'partials/dashboard.html',
        controller: widgetsController,
        activetab: 'dashboard'
    }).
    when('/lab', {
        templateUrl: 'partials/lab.html',
        controller: widgetsController,
        activetab: 'lab'
    });

$route在您的控制器中公开：

function widgetsController($scope, $route) {
    $scope.$route = $route;
}

active根据当前活动选项卡设置类：

<li ng-class="{active: $route.current.activetab == 'dashboard'}"></li>
<li ng-class="{active: $route.current.activetab == 'lab'}"></li>