如何切换ui-sref活动/非活动链接ui-router

时间:2016-07-28 17:21:18

标签: angularjs angular-ui-router

请考虑以下事项:

   <ul>
        <li id="dashboard" data-ui-sref-active="selected">
            <a data-ui-sref="home">Dashboard</a>
        </li>
<li id="jobs" data-ui-sref-active="selected">
        <a data-ui-sref="home.foo">Foos</a>
        <ul>
            <li data-ui-sref-active="selected">
                <a data-ui-sref="home.foo.foo1">Foo 1 list</a>
            </li>
            <li data-ui-sref-active="selected">
                <a data-ui-sref="home.foo.foo2">Foo 2 list</a>
            </li>
        </ul>
    </li>
</ul>

问题是如果用户当前点击另一个链接,则此“仪表板”链接状态仍然有效。

如何在用户点击或点击其他链接时切换状态活动/非活动状态

更新

我已经尝试过这个ui-sref-active-eq并且它确实有效,但我无法将此状态设置回活动状态

1 个答案:

答案 0 :(得分:1)

这是因为您处于home状态的子状态,因此它将始终处于活动状态。

使用ui-sref-active-eq代替

根据文件:

  

当ui-sref的目标状态或任何子状态处于活动状态时将激活。如果您只需要在ui-sref目标状态处于活动状态而不是任何子状态时激活,那么您将使用ui-sref-active-eq

修改:在Plnkr中添加以供参考。