ui-sref-active
ui.router.state
A directive working alongside ui-sref to add classes to an element when the
related ui-sref directive's state is active, and removing them when it is inactive.
The primary use-case is to simplify the special appearance of navigation menus
relying on ui-sref
, by having the "active" state's menu button appear different,
distinguishing it from the inactive menu items.
ui-sref-active can live on the same element as ui-sref or on a parent element. The first ui-sref-active found at the same level or above the ui-sref will be used.
Will activate when the ui-sref's target state or any child state is active. If you need to activate only when the ui-sref target state is active and not any of it's children, then you will use ui-sref-active-eq
<ANY ui-sref-active> ... </ANY>
Given the following template:
<ul> <li ui-sref-active="active" class="item"> <a href ui-sref="app.user({user: 'bilbobaggins'})">@bilbobaggins</a> </li> </ul>
When the app state is "app.user" (or any children states), and contains the state parameter "user" with value "bilbobaggins", the resulting HTML will appear as (note the 'active' class):
<ul> <li ui-sref-active="active" class="item active"> <a ui-sref="app.user({user: 'bilbobaggins'})" href="/users/bilbobaggins">@bilbobaggins</a> </li> </ul>
The class name is interpolated once during the directives link time (any further changes to the interpolated value are ignored).
Multiple classes may be specified in a space-separated format:
<ul> <li ui-sref-active='class1 class2 class3'> <a ui-sref="app.user">link</a> </li> </ul>