Лучший способ добавить класс для связи с ui-sref?

Question

Каков наилучший способ добавить класс для ссылки, который использует ui-sref="state1"? Моя проблема в том, что у меня есть мое меню за пределами 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> 

Я пытаюсь выделить активную ссылку, но не совсем уверен, какой лучший метод будет в этом сценарии?

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>