如何使用 Angular ui-router 根据状态使导航栏选项卡处于活动状态或已访问？

Question

我想根据当前状态使选项卡处于活动状态，当用户切换选项卡仅访问或当前活动选项卡应突出显示时，我想在状态处于活动状态时为选项卡设置背景颜色，是否可以使用 ui 来实现-路由器？

main.html

<nav class="navbar navbar-default">
    <div >
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a ui-sref="app.dit">DIT</a></li>
                <li><a ui-sref="app.st">ST</a>
                <li><a ui-sref="app.uat">UAT</a></li>
                <li><a ui-sref="app.prod">PROD</a></li>
            </ul>
        </div>
    </div>
</nav>

app.js

angular.module('App', [
        'ui.router'

    ]).config(function($stateProvider, $httpProvider, $urlRouterProvider) {
            'use strict'
            $urlRouterProvider.otherwise(function($injector) {
                var $state = $injector.get('$state');
                $state.go('app.dit');
            });

            $stateProvider
                .state('app', {
                    abstract: true,
                    url: '',
                    templateUrl: 'web/global/main.html',
                    controller: 'MainCtrl'
                })
                .state('app.dit', {
                    url: '/dit',
                    templateUrl: 'view/partials/dit.html',
                    controller: 'DitCtrl'
                })
                .state('app.st', {
                    url: '/st',
                    templateUrl: 'view/partials/st.html',
                    controller: 'StCtrl'
                })
                .state('app.uat', {
                    url: '/uat',
                    templateUrl: 'view/partials/uat.html',
                    controller: 'UatCtrl'
                })
                .state('app.prod', {
                    url: '/prod',
                    templateUrl: 'view/partials/prod.html',
                    controller: 'ProdCtrl',
                });

Answer 1

您可以使用ui-sref-active 指令和className 作为其属性值。因此，根据当前的活动状态，它将对特定的 li 元素应用活动类。

<nav class="navbar navbar-default">
    <div >
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li ui-sref-active="active"><a ui-sref="app.dit">DIT</a></li>
                <li ui-sref-active="active"><a ui-sref="app.st">ST</a>
                <li ui-sref-active="active"><a ui-sref="app.uat">UAT</a></li>
                <li ui-sref-active="active"><a ui-sref="app.prod">PROD</a></li>
            </ul>
        </div>
    </div>
</nav>