144 lines
3.9 KiB
TypeScript
144 lines
3.9 KiB
TypeScript
/** @publicapi @module directives */ /** */
|
|
import { ActiveUIView } from '@uirouter/core';
|
|
import { Ng1ViewConfig } from '../statebuilders/views';
|
|
import { ng1_directive } from './stateDirectives';
|
|
/** @hidden */
|
|
export declare type UIViewData = {
|
|
$cfg: Ng1ViewConfig;
|
|
$uiView: ActiveUIView;
|
|
};
|
|
/** @hidden */
|
|
export declare type UIViewAnimData = {
|
|
$animEnter: Promise<any>;
|
|
$animLeave: Promise<any>;
|
|
$$animLeave: {
|
|
resolve: () => any;
|
|
};
|
|
};
|
|
/**
|
|
* `ui-view`: A viewport directive which is filled in by a view from the active state.
|
|
*
|
|
* ### Attributes
|
|
*
|
|
* - `name`: (Optional) 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.
|
|
* The ui-view can be targeted in a View using the name ([[Ng1StateDeclaration.views]]).
|
|
*
|
|
* - `autoscroll`: an expression. When it evaluates to true, the `ui-view` will be scrolled into view when it is activated.
|
|
* Uses [[$uiViewScroll]] to do the scrolling.
|
|
*
|
|
* - `onload`: Expression to evaluate whenever the view updates.
|
|
*
|
|
* #### Example:
|
|
* A view can be unnamed or named.
|
|
* ```html
|
|
* <!-- Unnamed -->
|
|
* <div ui-view></div>
|
|
*
|
|
* <!-- Named -->
|
|
* <div ui-view="viewName"></div>
|
|
*
|
|
* <!-- Named (different style) -->
|
|
* <ui-view name="viewName"></ui-view>
|
|
* ```
|
|
*
|
|
* 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:
|
|
*
|
|
* ```html
|
|
* <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
|
|
* [[Ng1StateDeclaration.views]] config property, by name, in this case an empty name:
|
|
*
|
|
* ```js
|
|
* $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:
|
|
*
|
|
* ```html
|
|
* <div ui-view="main"></div>
|
|
* ```
|
|
*
|
|
* ```js
|
|
* $stateProvider.state("home", {
|
|
* views: {
|
|
* "main": {
|
|
* template: "<h1>HELLO!</h1>"
|
|
* }
|
|
* }
|
|
* })
|
|
* ```
|
|
*
|
|
* Really though, you'll use views to set up multiple views:
|
|
*
|
|
* ```html
|
|
* <div ui-view></div>
|
|
* <div ui-view="chart"></div>
|
|
* <div ui-view="data"></div>
|
|
* ```
|
|
*
|
|
* ```js
|
|
* $stateProvider.state("home", {
|
|
* views: {
|
|
* "": {
|
|
* template: "<h1>HELLO!</h1>"
|
|
* },
|
|
* "chart": {
|
|
* template: "<chart_thing/>"
|
|
* },
|
|
* "data": {
|
|
* template: "<data_thing/>"
|
|
* }
|
|
* }
|
|
* })
|
|
* ```
|
|
*
|
|
* #### Examples for `autoscroll`:
|
|
* ```html
|
|
* <!-- 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 [[Ng1ViewDeclaration.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:
|
|
* ```js
|
|
* $stateProvider.state('home', {
|
|
* template: '<my-component user="$resolve.user"></my-component>',
|
|
* resolve: {
|
|
* user: function(UserService) { return UserService.fetchUser(); }
|
|
* }
|
|
* });
|
|
* ```
|
|
*/
|
|
export declare let uiView: ng1_directive;
|