javascript - 带下拉菜单的 angularjs ui.router activestate

Question

我正在尝试创建我的菜单，其中包含应用程序中多个链接的下拉菜单。

我希望它在下面的链接之一处于事件状态时处于“事件”状态。

我的下拉列表中的链接处于事件状态，并且下拉列表处于事件状态，但我从未让它们一起工作...只有一个在工作...

这是代码，如果有人可以指出我哪里做错了!

<li class="dropdown" ui-sref-active-eq="active">
    <a class="dropdown-toggle" data-toggle="dropdown">
        Main
        <span class="caret"></span>
    </a>

    <ul class="dropdown-menu">
        <li ui-sref-active="active">
            <a ui-sref="Debut1">
                Items
            </a>
        </li>
    </ul>
</li>

编辑

这是一个显示问题的 plunkr https://plnkr.co/edit/Ffe9FLz4TuihkVjby6RU

回答

app.js

var app = angular.module('app', [
    'ui.router'
]);

app.config([
    '$stateProvider',
    '$urlRouterProvider',
    function ($stateProvider, $urlRouterProvider) {
        var accueil = {
            name: 'accueil',
            url: '/Accueil',
            templateUrl: '/app/views/accueil/accueil.html'
        }

        var debutant = {
            name: 'debut',
            url: '/Debut',
            abstract: true,
            templateUrl: '/app/views/debut/debut.html'
        }

        var debutant1 = {
            name: 'debut.one',
            url: '/One',
            parent: debutant,
            templateUrl: '/app/views/debut/debut1.html'
        }

        var debutant2 = {
            name: 'debut.two',
            url: '/Two',
            parent: debutant,
            templateUrl: '/app/views/debut/debut2.html'
        }

        $stateProvider.state(accueil);
        $stateProvider.state(debutant);
        $stateProvider.state(debutant1);
        $stateProvider.state(debutant2);
        $urlRouterProvider.otherwise('/Accueil');
    }
]);

index.html

<div class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
        <li ui-sref-active="active">
            <a ui-sref="accueil">
                Accueil
            </a>
        </li>

        <li class="dropdown" ui-sref="debut" ui-sref-active="active">
            <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                Début 
                <span class="caret"></span>
            </a>

            <ul class="dropdown-menu">
                <li ui-sref-active="active">
                    <a ui-sref="debut.one">
                        Début 1
                    </a>
                </li>

                <li ui-sref-active="active">
                    <a ui-sref="debut.two">
                        Début 2
                    </a>
                </li>
            </ul>
        </li>
    </ul>
</div>

首次亮相.html

<div ui-view></div>

Answer 1

几天后我找到了问题的真正解决方案。

因为我在使用 @John Spiteri 的解决方案时遇到控制台错误。

将我的 View 切换到

<li class="dropdown" ui-sref-active="{'active': 'debut.**'}">
    <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
        Début
        <span class="caret"></span>
    </a>

    <ul class="dropdown-menu">
        <li ui-sref-active="active">
            <a ui-sref="debut.one">
                Début 1
            </a>
        </li>
    </ul>
</li>

所以解决方案是这部分:

ui-sref-active="{'active': '首次亮相.**'}"

其中 .** 与父级的任何子级匹配!