UiSref | UI-Router
Options
All
  • Public
  • Public/Protected
  • All
Menu

A directive when clicked, initiates a Transition to a TargetState.

Purpose

This directive is applied to anchor tags (<a>) or any other clickable element. It is a state reference (or sref -- similar to an href). When clicked, the directive will transition to that state by calling StateService.go, and optionally supply state parameter values and transition options.

When this directive is on an anchor tag, it will also add an href attribute to the anchor.

Selector

  • [uiSref]: The directive is created as an attribute on an element, e.g., <a uiSref></a>

Inputs

  • uiSref: the target state's name, e.g., uiSref="foostate". If a component template uses a relative uiSref, e.g., uiSref=".child", the reference is relative to that component's state.

  • uiParams: any target state parameter values, as an object, e.g., [uiParams]="{ fooId: bar.fooId }"

  • uiOptions: TransitionOptions, e.g., [uiOptions]="{ inherit: false }"

example

<!-- Targets bar state' -->
<a uiSref="bar">Bar</a>

<!-- Assume this component's state is "foo".
     Relatively targets "foo.child" -->
<a uiSref=".child">Foo Child</a>

<!-- Targets "bar" state and supplies parameter value -->
<a uiSref="bar" [uiParams]="{ barId: foo.barId }">Bar </a>

<!-- Targets "bar" state and parameter, doesn't inherit existing parameters-->
<a uiSref="bar" [uiParams]="{ barId: foo.barId }" [uiOptions]="{ inherit: false }">Bar </a>

Hierarchy

  • UiSref

Index

Constructors

Properties

_anchorUiSref: AnchorUiSref
_router: UIRouter
options: any
params: any
state: string

Accessors

  • set uiOptions(val: any): void
  • set uiParams(val: any): void
  • set uiSref(val: any): void

Methods

  • getOptions(): any
  • go(): boolean
  • ngOnInit(): void
  • update(): void

Generated using TypeDoc