angularjs - 在嵌套配置的根状态下停用 Ui-router 的 ui-sref-active

Question

我有 2 个按钮，并且都有 ui-sref-active。

<a class="button" ui-sref-active="button-selected" ui-sref="main">
    <p>View patients</p>
</a>
<a class="button" ui-sref-active="button-selected" ui-sref="main.create">
    <p>Add patients</>
</a>

和CSS

.button-selected {
    color: #0000FF;
}

我想知道为什么当我单击状态为“main.create”的第二个按钮时，没有从第一个按钮中删除“button-selected”类。所以在第一个按钮上仍然可以看到颜色#0000FF。看起来“主要”状态始终处于活动状态。是因为它是根状态吗？解决方法是什么？

Answer 1

该类已添加到两种状态，因为您应该使用ui-sref-active-eq而不是ui-sref-active.

<a class="button" ui-sref-active-eq="button-selected" ui-sref="main">
    <p>View patients</p>
</a>
<a class="button" ui-sref-active-eq="button-selected" ui-sref="main.create">
    <p>Add patients</>
</a>