与AngularJS设置活动标签的风格 [英] Set active tab style with AngularJS

问题描述

我在AngularJS设置这样的路线：

I have routes set in AngularJS like this:

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

我对风格为标签上的顶栏的一些链接。我如何可以根据当前模板或URL添加主动类标签？

I have some links on the topbar styled as tabs. How can I add 'active' class to a tab depending on current template or url?

推荐答案

要解决这个问题，而不必依赖于网址的方法是在添加自定义属性，各部分的 $ routeProvider 配置，如：

A way to solve this without having to rely on URLs is to add a custom attribute to every partial during $routeProvider configuration, like this:

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

在暴露你的控制器 $路线：

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

将根据当前的活动选项卡上的活动类：

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

这篇关于与AngularJS设置活动标签的风格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！