AngularJS UI.Router通过下拉列表激活

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>

编辑

这是一个显示问题的plunkrhttps://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>

peput.html

<div ui-view></div>

Answer 1

几天后我发现了我问题的真正解决方案。

因为我在@john Spiteri的解决方案中有控制台错误。

将我的视图切换到

<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'：'peput。**'}"

。**匹配父母的任何孩子！

Answer 2

ui-sref-active将在所有子路由上保持活跃...问题是您实施UI-Router。

当我从逻辑上思考路线链接时，它就是这样的。

'/'='app.inventory'//摘要：true-可能共享解决方案或数据
'/库存/'='app.inventory.list'
'/库存/鞋子/'='app.inventory.shoes'

我不得不改变我的方法（和思考）才能使UI-Sref活跃工作。

让开始（首次亮相）路由父母，然后与孩子交换唯一的部分。

您会注意到" Accueil"状态保持活跃...

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

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

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

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