1 | /** @publicapi @module directives */ /** */
|
2 | import { ActiveUIView } from '@uirouter/core';
|
3 | import { Ng1ViewConfig } from '../statebuilders/views';
|
4 | import { ng1_directive } from './stateDirectives';
|
5 | /** @hidden */
|
6 | export declare type UIViewData = {
|
7 | $cfg: Ng1ViewConfig;
|
8 | $uiView: ActiveUIView;
|
9 | };
|
10 | /** @hidden */
|
11 | export declare type UIViewAnimData = {
|
12 | $animEnter: Promise<any>;
|
13 | $animLeave: Promise<any>;
|
14 | $$animLeave: {
|
15 | resolve: () => any;
|
16 | };
|
17 | };
|
18 | /**
|
19 | * `ui-view`: A viewport directive which is filled in by a view from the active state.
|
20 | *
|
21 | * ### Attributes
|
22 | *
|
23 | * - `name`: (Optional) A view name.
|
24 | * The name should be unique amongst the other views in the same state.
|
25 | * You can have views of the same name that live in different states.
|
26 | * The ui-view can be targeted in a View using the name ([[Ng1StateDeclaration.views]]).
|
27 | *
|
28 | * - `autoscroll`: an expression. When it evaluates to true, the `ui-view` will be scrolled into view when it is activated.
|
29 | * Uses [[$uiViewScroll]] to do the scrolling.
|
30 | *
|
31 | * - `onload`: Expression to evaluate whenever the view updates.
|
32 | *
|
33 | * #### Example:
|
34 | * A view can be unnamed or named.
|
35 | * ```html
|
36 | * <!-- Unnamed -->
|
37 | * <div ui-view></div>
|
38 | *
|
39 | * <!-- Named -->
|
40 | * <div ui-view="viewName"></div>
|
41 | *
|
42 | * <!-- Named (different style) -->
|
43 | * <ui-view name="viewName"></ui-view>
|
44 | * ```
|
45 | *
|
46 | * You can only have one unnamed view within any template (or root html). If you are only using a
|
47 | * single view and it is unnamed then you can populate it like so:
|
48 | *
|
49 | * ```html
|
50 | * <div ui-view></div>
|
51 | * $stateProvider.state("home", {
|
52 | * template: "<h1>HELLO!</h1>"
|
53 | * })
|
54 | * ```
|
55 | *
|
56 | * The above is a convenient shortcut equivalent to specifying your view explicitly with the
|
57 | * [[Ng1StateDeclaration.views]] config property, by name, in this case an empty name:
|
58 | *
|
59 | * ```js
|
60 | * $stateProvider.state("home", {
|
61 | * views: {
|
62 | * "": {
|
63 | * template: "<h1>HELLO!</h1>"
|
64 | * }
|
65 | * }
|
66 | * })
|
67 | * ```
|
68 | *
|
69 | * But typically you'll only use the views property if you name your view or have more than one view
|
70 | * in the same template. There's not really a compelling reason to name a view if its the only one,
|
71 | * but you could if you wanted, like so:
|
72 | *
|
73 | * ```html
|
74 | * <div ui-view="main"></div>
|
75 | * ```
|
76 | *
|
77 | * ```js
|
78 | * $stateProvider.state("home", {
|
79 | * views: {
|
80 | * "main": {
|
81 | * template: "<h1>HELLO!</h1>"
|
82 | * }
|
83 | * }
|
84 | * })
|
85 | * ```
|
86 | *
|
87 | * Really though, you'll use views to set up multiple views:
|
88 | *
|
89 | * ```html
|
90 | * <div ui-view></div>
|
91 | * <div ui-view="chart"></div>
|
92 | * <div ui-view="data"></div>
|
93 | * ```
|
94 | *
|
95 | * ```js
|
96 | * $stateProvider.state("home", {
|
97 | * views: {
|
98 | * "": {
|
99 | * template: "<h1>HELLO!</h1>"
|
100 | * },
|
101 | * "chart": {
|
102 | * template: "<chart_thing/>"
|
103 | * },
|
104 | * "data": {
|
105 | * template: "<data_thing/>"
|
106 | * }
|
107 | * }
|
108 | * })
|
109 | * ```
|
110 | *
|
111 | * #### Examples for `autoscroll`:
|
112 | * ```html
|
113 | * <!-- If autoscroll present with no expression,
|
114 | * then scroll ui-view into view -->
|
115 | * <ui-view autoscroll/>
|
116 | *
|
117 | * <!-- If autoscroll present with valid expression,
|
118 | * then scroll ui-view into view if expression evaluates to true -->
|
119 | * <ui-view autoscroll='true'/>
|
120 | * <ui-view autoscroll='false'/>
|
121 | * <ui-view autoscroll='scopeVariable'/>
|
122 | * ```
|
123 | *
|
124 | * Resolve data:
|
125 | *
|
126 | * The resolved data from the state's `resolve` block is placed on the scope as `$resolve` (this
|
127 | * can be customized using [[Ng1ViewDeclaration.resolveAs]]). This can be then accessed from the template.
|
128 | *
|
129 | * Note that when `controllerAs` is being used, `$resolve` is set on the controller instance *after* the
|
130 | * controller is instantiated. The `$onInit()` hook can be used to perform initialization code which
|
131 | * depends on `$resolve` data.
|
132 | *
|
133 | * #### Example:
|
134 | * ```js
|
135 | * $stateProvider.state('home', {
|
136 | * template: '<my-component user="$resolve.user"></my-component>',
|
137 | * resolve: {
|
138 | * user: function(UserService) { return UserService.fetchUser(); }
|
139 | * }
|
140 | * });
|
141 | * ```
|
142 | */
|
143 | export declare let uiView: ng1_directive;
|