External module ng1_directives

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:

example

<pre>
<a ui-sref="home">Home</a> | <a ui-sref="about">About</a> | <a ui-sref="{page: 2}">Next page</a>

<ul>
    <li ng-repeat="contact in contacts">
        <a ui-sref="contacts.detail({ id: contact.id })"></a>
    </li>
</ul>
</pre>

Then the compiled html would be (assuming Html5Mode is off and current state is contacts):

<pre>
<a href="#/home" ui-sref="home">Home</a> | <a href="#/about" ui-sref="about">About</a> | <a href="#/contacts?page=2" ui-sref="{page: 2}">Next page</a>

<ul>
    <li ng-repeat="contact in contacts">
        <a href="#/contacts/1" ui-sref="contacts.detail({ id: contact.id })">Joe</a>
    </li>
    <li ng-repeat="contact in contacts">
        <a href="#/contacts/2" ui-sref="contacts.detail({ id: contact.id })">Alice</a>
    </li>
    <li ng-repeat="contact in contacts">
        <a href="#/contacts/3" ui-sref="contacts.detail({ id: contact.id })">Bob</a>
    </li>
</ul>

<a ui-sref="home" ui-sref-opts="{reload: true}">Home</a>
</pre>

param

'stateName' can be any valid absolute or relative state

param

options to pass to StateService.go

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:

example

<pre>
<ul>
  <li ui-sref-active="active" class="item">
    <a href ui-sref="app.user({user: 'bilbobaggins'})">@bilbobaggins</a>
  </li>
</ul>
</pre>

When the app state is "app.user" (or any children states), and contains the state parameter "user" with value "bilbobaggins", the resulting HTML will appear as (note the 'active' class):

<pre>
<ul>
  <li ui-sref-active="active" class="item active">
    <a ui-sref="app.user({user: 'bilbobaggins'})" href="/users/bilbobaggins">@bilbobaggins</a>
  </li>
</ul>
</pre>

The class name is interpolated once during the directives link time (any further changes to the interpolated value are ignored).

Multiple classes may be specified in a space-separated format:

<pre>
<ul>
  <li ui-sref-active='class1 class2 class3'>
    <a ui-sref="app.user">link</a>
  </li>
</ul>
</pre>

It is also possible to pass ui-sref-active an expression that evaluates to an object hash, whose keys represent active class names and whose values represent the respective state names/globs. ui-sref-active will match if the current active state includes any of the specified state names/globs, even the abstract ones.

Given the following template, with "admin" being an abstract state:

example

<pre>
<div ui-sref-active="{'active': 'admin.*'}">
  <a ui-sref-active="active" ui-sref="admin.roles">Roles</a>
</div>
</pre>

When the current state is "admin.roles" the "active" class will be applied to both the

and elements. It is important to note that the state names/globs passed to ui-sref-active shadow the state provided by ui-sref.

Much like ui-sref, but will accept named $scope properties to evaluate for a state definition, params and override options.

example

```html

param

'stateName' can be any valid absolute or relative state

param

params to pass to StateService.href

param

options to pass to StateService.go

param

A view name. The name should be unique amongst the other views in the same state. You can have views of the same name that live in different states.

param

It allows you to set the scroll behavior of the browser window when a view is populated. By default, $anchorScroll is overridden by ui-router's custom scroll service, {@link ui.router.state.$uiViewScroll}. This custom service let's you scroll ui-view elements into view when they are populated during a state activation.

Note: To revert back to old $anchorScroll functionality, call $uiViewScrollProvider.useAnchorScroll().

param

Expression to evaluate whenever the view updates.

A view can be unnamed or named.

example

<!-- Unnamed -->
<div ui-view></div>

<!-- Named -->
<div ui-view="viewName"></div>

You can only have one unnamed view within any template (or root html). If you are only using a single view and it is unnamed then you can populate it like so:

<div ui-view></div>
$stateProvider.state("home", {
  template: "<h1>HELLO!</h1>"
})

The above is a convenient shortcut equivalent to specifying your view explicitly with the {@link ui.router.state.$stateProvider#views views} config property, by name, in this case an empty name:

$stateProvider.state("home", {
  views: {
    "": {
      template: "<h1>HELLO!</h1>"
    }
  }
})

But typically you'll only use the views property if you name your view or have more than one view in the same template. There's not really a compelling reason to name a view if its the only one, but you could if you wanted, like so:

<div ui-view="main"></div>

$stateProvider.state("home", {
  views: {
    "main": {
      template: "<h1>HELLO!</h1>"
    }
  }
})

Really though, you'll use views to set up multiple views:

<div ui-view></div>
<div ui-view="chart"></div>
<div ui-view="data"></div>

$stateProvider.state("home", {
  views: {
    "": {
      template: "<h1>HELLO!</h1>"
    },
    "chart": {
      template: "<chart_thing/>"
    },
    "data": {
      template: "<data_thing/>"
    }
  }
})

Examples for autoscroll:

<!-- If autoscroll present with no expression,
     then scroll ui-view into view -->
<ui-view autoscroll/>

<!-- If autoscroll present with valid expression,
     then scroll ui-view into view if expression evaluates to true -->
<ui-view autoscroll='true'/>
<ui-view autoscroll='false'/>
<ui-view autoscroll='scopeVariable'/>

Resolve data:

The resolved data from the state's resolve block is placed on the scope as $resolve (this can be customized using [[ViewDeclaration.resolveAs]]). This can be then accessed from the template.

Note that when controllerAs is being used, $resolve is set on the controller instance after the controller is instantiated. The $onInit() hook can be used to perform initialization code which depends on $resolve data.

example

$stateProvider.state('home', {
  template: '<my-component user="$resolve.user"></my-component>',
  resolve: {
    user: function(UserService) { return UserService.fetchUser(); }
  }
});