Question

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

我希望它能够活跃起来＆＃34;而其中一个链接是活动的。

我的下拉列表中的链接处于活动状态，我让下拉列表处于活动状态，但我从未让他们两个一起工作......只有一个正在工作......

这是代码，如果有人可以指出我做错了什么！

<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

ANSWER

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

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

因为我在@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'：'debut。**'}”

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

Answer 2

ui-sref-active将对所有子路由保持活动状态...问题在于您的UI路由器的实现。

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

'/'='app.inventory'// abstract：true - 可能共享解析或数据
'/ inventory /'='app.inventory.list'
'/ inventory / shoes /'='app.inventory.shoes'

我必须改变我的方法（和思考）才能使ui-sref-active工作。

让父母开始（初次登台）路线，然后换掉与孩子一起的唯一部分。

你会注意到'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/8u3RhHRiPdhdF1lhWbeM?p=preview

此外，还为活跃的孩子添加了一个版本......

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

angularjs ui.router activestate with dropdown

2 个答案: