带有下拉的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>

编辑

下面是一个显示问题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>

​

debut.html

<div ui-view></div>

Answer 1

用户界面-sref-活动将保持活跃的所有儿童路线.问题在于您的UI-路由器的实现。

当我从逻辑上思考路线链时，就会出现这样的情况。

'/‘= 'app.inventory’//抽象:真--可能共享解析或数据

‘/库存/’= 'app.inventory.list‘

‘/库存/鞋子/’= 'app.inventory.shoes‘

我不得不改变我的方法(和想法)，使ui-sref-积极的工作。

使开始(调试器)路由父进程，然后将唯一的部分替换为一个子部分。

你会注意到‘习惯’状态保持活跃.

    $stateProvider
      .state('accueil', {
        url: '/accueil',
        views: {
          'content@': {
            templateUrl: './accueil.html'
          }
        }
      })
      .state('accueil.debutant', {
        url: '/debutant',
        views: {
          'content@': {
            templateUrl: './debut.html'
          }
        }
      });
    }

https://plnkr.co/edit/8u3RhHRiPdhdF1lhWbeM?p=preview

另外，还为孩子添加了一个版本.

https://plnkr.co/edit/dXexFM38IUF3uaBGPovL?p=preview