Improve this doc View source

ui-sref-active
directive in module ui.router.state

Description

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

Dependencies

Usage

as attribute
<ANY ui-sref-active>
   ...
</ANY>

Example

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>

It is also possible to pass ui-sref-active an expression that evaluates to an object hash, whose keys represent active class names and whose values represent the respective state names/globs. ui-sref-active will match if the current active state includes any of the specified state names/globs, even the abstract ones.