ui-view
directive in module ui.router.state

Description

The ui-view directive tells $state where to place your templates.

Dependencies

Usage

as element:
<ui-view
       [name="{string}"]
       [autoscroll="{string}"]
       [onload="{string}"]>
</ui-view>
as attribute
<ANY ui-view
     [name="{string}"]
     [autoscroll="{string}"]
     [onload="{string}"]>
   ...
</ANY>
as class
<ANY class="ui-view [name: {string};] [autoscroll: {string};] [onload: {string};]">
   ...
</ANY>

Parameters

ParamTypeDetails
name
(optional)
string

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.

autoscroll
(optional)
string

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, 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().

onload
(optional)
string

Expression to evaluate whenever the view updates.

Events

Example

A view can be unnamed or named. 

<!-- 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 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'/>