UISref | @uirouter/angular
Options
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

Implements

  • OnChanges

Index

Constructors

Properties

_anchorUISref: AnchorUISref
_emit: boolean = false
_router: UIRouter
_statesSub: Subscription
options: TransitionOptions

@Input('uiOptions') The transition options

@Input('uiOptions') The transition options

<a uiSref="books" [uiOptions]="{ reload: true }">Book </a>
params: any

@Input('uiParams') The parameter values to use (as key/values)

@Input('uiParams') The parameter values to use (as key/values)

<a uiSref="book" [uiParams]="{ bookId: book.id }">Book </a>
state: string

@Input('uiSref') The name of the state to link to

@Input('uiSref') The name of the state to link to

<a uiSref="hoome">Home</a>
targetState$: ReplaySubject<TargetState> = new ReplaySubject<TargetState>(1)

An observable (ReplaySubject) of the state this UISref is targeting. When the UISref is clicked, it will transition to this TargetState.

An observable (ReplaySubject) of the state this UISref is targeting. When the UISref is clicked, it will transition to this TargetState.

Accessors

  • set uiOptions(val: TransitionOptions): void
  • set uiParams(val: Obj): void
  • set uiSref(val: string): void

Methods

  • getOptions(): TransitionOptions
  • go(button: number, ctrlKey: boolean, metaKey: boolean): boolean
  • When triggered by a (click) event, this function transitions to the UISref's target state

  • ngOnChanges(changes: SimpleChanges): void
  • ngOnDestroy(): void
  • ngOnInit(): void
  • update(): void

Generated using TypeDoc