Question

我想基于当前状态使标签处于活动状态，我想在状态处于活动状态时为标签设置背景颜色，当仅访问用户切换标签或突出显示当前活动标签时，是否可以使用ui实现-router？

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>

如何使用角度ui-router基于状态使导航栏选项卡处于活动状态或访问状态？

1 个答案: