ui-router ui-sref

ui-sref

directive in module ui.router.state

Description

A directive that binds a link (<a> tag) to a state. If the state has an associated URL, the directive will automatically generate & update the hrefattribute via the $state.href() method. Clicking the link will trigger a state transition with optional parameters.

Also middle-clicking, right-clicking, and ctrl-clicking on the link will be handled natively by the browser.

You can also use relative state paths within ui-sref, just like the relative paths passed to $state.go(). You just need to be aware that the path is relative to the state that the link lives in, in other words the state that loaded the template containing the link.

You can specify options to pass to $state.go() using the ui-sref-opts attribute. Options are restricted to location, inherit, and reload.

Dependencies

Usage

as attribute

  1. <ANY ui-sref=“{string}”
  2. ui-sref-opts=“{Object}”>
  3. </ANY>

Parameters

Param Type Details
ui-sref string

‘stateName’ can be any valid absolute or relative state

ui-sref-opts Object

options to pass to $state.go()

Example

Here’s an example of how you’d use ui-sref and how it would compile. If you have the following template:

  1. <a ui-sref=“home”>Home</a> | <a ui-sref=“about”>About</a> | <a ui-sref=“{page: 2}”>Next page</a>
  2.  
  3. <ul>
  4. <li ng-repeat=“contact in contacts”>
  5. <a ui-sref=“contacts.detail({ id: contact.id })”>{{ contact.name }}</a>
  6. </li>
  7. </ul>

Then the compiled html would be (assuming Html5Mode is off and current state is contacts):

  1. <a href=“#/home” ui-sref=“home”>Home</a> | <a href=“#/about” ui-sref=“about”>About</a> | <a href=“#/contacts?page=2” ui-sref=“{page: 2}”>Next page</a>
  2.  
  3. <ul>
  4. <li ng-repeat=“contact in contacts”>
  5. <a href=“#/contacts/1” ui-sref=“contacts.detail({ id: contact.id })”>Joe</a>
  6. </li>
  7. <li ng-repeat=“contact in contacts”>
  8. <a href=“#/contacts/2” ui-sref=“contacts.detail({ id: contact.id })”>Alice</a>
  9. </li>
  10. <li ng-repeat=“contact in contacts”>
  11. <a href=“#/contacts/3” ui-sref=“contacts.detail({ id: contact.id })”>Bob</a>
  12. </li>
  13. </ul>
  14.  
  15. <a ui-sref=“home” ui-sref-opts=“{reload: true}”>Home</a>