使用 ui-sref 将 class 添加到 link 的最佳方法？

Question

将 class 添加到使用 ui-sref="state1" 的 link 的最佳方法是什么？我的问题是我的菜单在 ui-view 之外。

<ul>
    <li>
        <a data-ng-class="{active: active=='dash'}" data-ui-sref="dash">Dashboard</a>
    </li>
    <li>
        <a data-ui-sref="reports">Reports</a>
    </li>
</ul>
<div data-ui-view="main"></div>

我试图突出显示活动 link 但不太确定在这种情况下最好的方法是什么？

Answer 1

您可以使用 ui-sref-active 指令来做到这一点：

<ul>
    <li>
        <a ui-sref-active="active" data-ui-sref="dash">Dashboard</a>
    </li>
    <li>
        <a data-ui-sref="reports">Reports</a>
    </li>
</ul>
<div data-ui-view="main"></div>

Answer 2

function myFunction() {
  $("[ui-sref='state1']").addClass('newClass');
}
$(document).ready(myFunction);

.newClass{
  color:red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul>
    <li>
        <a data-ng-class="{active: active=='dash'}" data-ui-sref="dash">Dashboard</a>
    </li>
    <li>
        <a data-ui-sref="reports" ui-sref='state1'>Reports</a>
    </li>
</ul>
<div data-ui-view="main"></div>

使用 ui-sref 将 class 添加到 link 的最佳方法？

Best way to add class to link with ui-sref?

angularjs

angular-ui-router