如何使用动态ui-sref-active制作导航栏？

问题描述

我正在构建导航栏，通过ng-repeat创建项目。我有JS对象，其中包含构造navbar元素所需的所有信息。我不知道如何使ui-sref-active工作。 HTML如下所示：

    <ul class="nav navbar-nav">
        <!-- TODO: can't figure out dynamic ui-sref-active. Using 'active' for now -->
        <li ng-repeat="item in footerCtrl.navItems | limitTo: footerCtrl.shownNavItems"
            class="footer-nav-menu-item">
            <a aria-label="item.ariaLabel"
               id="item.id"
               ui-sref="{{item.sref}}"
               ui-sref-active='active'
               class="footer-link"
            >
                <div class="svg-icon" ng-include="item.icon"></div>
                <div class="tertiary-navigation-static text-center">{{item.text}}</div>
            </a>
        </li>
    </ul>

我的JS对象如下：

{
    text: 'Explore',id: 'explore',icon: '/icon_compass.svg',ariaLabel: 'Explore',sref: 'index.matches.explore',srefActive: 'index.matches.**'
},{
    text: 'Jobs',id: 'jobsBoard',icon: '/icon_briefcase.svg',ariaLabel: 'Jobs Board',sref: 'index.jobsBoard',srefActive: 'active' 
}

我没有任何问题可以动态运行sref，但是我在元素中使用的ui-sref-active遇到了麻烦。我认为主要问题是有时候我想要默认的'active'行为，而其他时候我想要这样的路径匹配：

ui-sref-active="{'active': 'index.matches.**'}"

这意味着我的HTML不能简单地看起来像这样：

ui-sref-active="{'active': item.srefActive}"

否则它将破坏'active'被设置为srefActive的对象

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）