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

options: TransitionOptions

@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