Question

我是ui-router的新手，如果它是活动页面，我正在尝试为我的导航项添加一个类。

这是我的stateProvider：

$stateProvider
    .state('home', {
        url: '/home',
        templateUrl: 'templates/home.html',
    })
    .state('matches', {
        url: '/matches',
        templateUrl: 'templates/matches.html',
    })
    .state('matches.add', {
        url: '/add',
        templateUrl: 'templates/add-match.html',
    })
    .state('statistics', {
        url: '/statistics',
        templateUrl: 'templates/statistics.html',
    });

哪个应转换为以下结构：

/home
/matches
    /add
/statistics

我正在使用控制器生成导航：

app.controller('mainNavController', ['$scope', function($scope) {
    $scope.items = [
        {
            title: 'Home',
            sref: 'home',
            href: './home',
        },
        {
            title: 'Matches',
            sref: 'matches',
            href: './matches',
        },
        {
            title: 'Statistieken',
            sref: 'statistics',
            href: './statistics',
        },
    ];
}]);

这样生成ul.main-nav：

<ul class="main-nav" ng-controller="mainNavController">
    <li ng-repeat="item in items" ui-sref-active="is-active"><a href="{{item.href}}" ui-sref="{{item.sref}}">{{item.title}}</a></li>
</ul>

普通（根级）元素获得正确的活动类，但是当转到/matches/add时，它不会将活动类添加到导航中的Matches元素。

我该怎么做呢？我检查了this commit，但我没有看到如何将其实现到我的项目中。

Answer 1

如果您为第一级项目下的第二级项目ui-sref放置

，您的代码将有效

引用官方angular-ui-router docs：

ui-sref-active可以与ui-sref或父级相同的元素生存元件。第一个ui-sref-active发现在同一级别或更高级别将使用ui-sref。

Answer 2

似乎如果你将你的ui-router更新到最新版本，这是照顾

AngularJS ui-router子页面

2 个答案: