angular-ui-router

<h1><code ng:non-bindable="">ui-view</code> <div><span class="hint">directive in module <code ng:non-bindable="">ui.router.state</code> </span> </div> </h1> <div><h2 id="description">Description</h2> <div class="description"><div class="ui-router-state-directive-page ui-router-state-directive-ui-view-page"><p>The ui-view directive tells $state where to place your templates.</p> </div></div> <h2 id="dependencies">Dependencies</h2> <ul class="dependencies"><li><code ng:non-bindable=""><a href="#/api/ui.router.state.$state">$state</a></code> </li> <li><code ng:non-bindable=""><a href="#/api/ng.$compile">$compile</a></code> </li> <li><code ng:non-bindable=""><a href="#/api/ng.$controller">$controller</a></code> </li> <li><code ng:non-bindable=""><a href="#/api/ng.$injector">$injector</a></code> </li> <li><code ng:non-bindable=""><a href="#/api/ui.router.state.$uiViewScroll">$uiViewScroll</a></code> </li> <li><code ng:non-bindable=""><a href="#/api/ng.$document">$document</a></code> </li> </ul> <h2 id="usage">Usage</h2> <div class="usage">as element:<pre class="prettyprint linenums"><ui-view [name="{string}"] [autoscroll="{string}"] [onload="{string}"]> </ui-view></pre> as attribute<pre class="prettyprint linenums"><ANY ui-view [name="{string}"] [autoscroll="{string}"] [onload="{string}"]> ... </ANY></pre> as class<pre class="prettyprint linenums"><ANY class="ui-view [name: {string};] [autoscroll: {string};] [onload: {string};]"> ... </ANY></pre> <h4 id="usage_parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>name <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="ui-router-state-directive-page ui-router-state-directive-ui-view-page"><p>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.</p> </div></td></tr><tr><td>autoscroll <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="ui-router-state-directive-page ui-router-state-directive-ui-view-page"><p>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, <a href="#/api/ui.router.state.$uiViewScroll">ui.router.state.$uiViewScroll</a>. This custom service let's you scroll ui-view elements into view when they are populated during a state activation.</p> <p><em>Note: To revert back to old <a href="http://docs.angularjs.org/api/ng.$anchorScroll"><code>$anchorScroll</code></a> functionality, call <code>$uiViewScrollProvider.useAnchorScroll()</code>.</em></p> </div></td></tr><tr><td>onload <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="ui-router-state-directive-page ui-router-state-directive-ui-view-page"><p>Expression to evaluate whenever the view updates.</p> </div></td></tr></tbody></table></div> <div class="member event"><h2 id="events">Events</h2> <ul class="events"><li><h3 id="events_$viewcontentloaded">$viewContentLoaded</h3> <div class="$viewcontentloaded"><div class="ui-router-state-directive-page ui-router-state-directive-ui-view-viewcontentloaded-page"><p><em> Fired once the view is <strong>loaded</strong>, </em>after* the DOM is rendered.</p> </div><div class="inline"><h4 id="events_$viewcontentloaded_type">Type:</h4> <div class="type">emits</div> </div> <div class="inline"><h4 id="events_$viewcontentloaded_target">Target:</h4> <div class="target">ui-view directive scope</div> </div> <h5 id="events_$viewcontentloaded_target_parameters">Parameters</h5><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>event</td><td><a href="" class="label type-hint type-hint-object">Object</a></td><td><div class="ui-router-state-directive-page ui-router-state-directive-ui-view-viewcontentloaded-page"><p>Event object.</p> </div></td></tr></tbody></table></div> </li> </ul> </div> <h2 id="example">Example</h2> <div class="example"><div class="ui-router-state-directive-page ui-router-state-directive-ui-view-page"><p>A view can be unnamed or named. <pre class="prettyprint linenums">  <div ui-view></div>  <div ui-view="viewName"></div> </pre> <p>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: <pre class="prettyprint linenums"> <div ui-view></div> $stateProvider.state("home", { template: "<h1>HELLO!</h1>" }) </pre> <p>The above is a convenient shortcut equivalent to specifying your view explicitly with the <a href="#/api/ui.router.state.$stateProvider#views"><code>views</code></a> config property, by name, in this case an empty name: <pre class="prettyprint linenums"> $stateProvider.state("home", { views: { "": { template: "<h1>HELLO!</h1>" } } }) </pre> <p>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: <pre class="prettyprint linenums"> <div ui-view="main"></div> </pre> <pre class="prettyprint linenums"> $stateProvider.state("home", { views: { "main": { template: "<h1>HELLO!</h1>" } } }) </pre> <p>Really though, you'll use views to set up multiple views: <pre class="prettyprint linenums"> <div ui-view></div> <div ui-view="chart"></div> <div ui-view="data"></div> </pre> <pre class="prettyprint linenums"> $stateProvider.state("home", { views: { "": { template: "<h1>HELLO!</h1>" }, "chart": { template: "<chart_thing/>" }, "data": { template: "<data_thing/>" } } }) </pre> <p>Examples for <code>autoscroll</code>:</p> <pre class="prettyprint linenums">  <ui-view autoscroll/>  <ui-view autoscroll='true'/> <ui-view autoscroll='false'/> <ui-view autoscroll='scopeVariable'/> </pre> </div></div> </div>