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

Implements

  • OnChanges

Index

Constructors

constructor

  • new UISref(_router: UIRouter, _anchorUISref: AnchorUISref, parent: ParentUIViewInject): UISref

Properties

options

@Input('uiOptions') The transition options

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

params

params: any

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

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

state

state: string

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

<a uiSref="hoome">Home</a>

targetState$

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.

Methods

getOptions

  • getOptions(): any

go

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

    Parameters

    • button: number
    • ctrlKey: boolean
    • metaKey: boolean

    Returns boolean

ngOnChanges

  • ngOnChanges(changes: SimpleChanges): void

ngOnDestroy

  • ngOnDestroy(): void

ngOnInit

  • ngOnInit(): void

Generated using TypeDoc