ui-sref
: A directive for linking to a state
A directive that binds a link (<a>
tag) to a state.
If the state has an associated URL, the directive will automatically generate and
update the href
attribute via the StateService.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 created the view containing the link.
You can specify options to pass to StateService.go using the ui-sref-opts
attribute.
Options are restricted to location
, inherit
, and reload
.
Here's an example of how you'd use ui-sref and how it would compile. If you have the following template:
ui-sref-active
and ui-sref-active-eq
: A directive that adds a CSS class when a ui-sref
is active
A directive working alongside ui-sref to add classes to an element when the
related ui-sref directive's state is active, and removing them when it is inactive.
The primary use-case is to simplify the special appearance of navigation menus
relying on ui-sref
, by having the "active" state's menu button appear different,
distinguishing it from the inactive menu items.
ui-sref-active can live on the same element as ui-sref or on a parent element. The first ui-sref-active found at the same level or above the ui-sref will be used.
Will activate when the ui-sref's target state or any child state is active. If you need to activate only when the ui-sref target state is active and not any of it's children, then you will use ui-sref-active-eq
Given the following template:
ui-state
: A dynamic version of ui-sref
Much like ui-sref, but will accept named $scope properties to evaluate for a state definition, params and override options.
ui-view
: A viewport directive which is filled in by a view from the active state.
Generated using TypeDoc
These are the UI-Router angular 1 directives.
These directives are used in templates to create viewports and navigate to states