You can name your views so that you can have more than one ui-view per template. Let's say you had an application state that needed to dynamically populate a graph, some table data and filters for the table like this:
您可以爲您的視圖命名，以便您可以在每個模板中擁有多個ui-view。假設您有一個需要動態填充圖形的應用程序狀態，其中一些表數據和過濾器如下所示:
When setting multiple views, you need to use the views property on the state object. views is an object.
在設置多個視圖時，需要在state對象上使用views屬性。views是一個對象。
Views override state's template properties
views屬性會覆蓋狀態的template屬性
If you define a views object, your state's templateUrl, template and templateProvider will be ignored. So in the case that you need a parent layout of these views, you can define an abstract state that contains a template, and a child state under the layout state that contains the 'views' object.
如果您定義了一個views屬性，那麼您的狀態的templateUrl、template和templateProvider將被忽略。因此，在需要這些views的父佈局的情況下，您可以定義包含模板的抽象狀態，以及包含“views”對象的佈局狀態下的子狀態。
Example - Name Matching
例子 - 名稱匹配
The property keys on views should match your view names, like so:
views中的屬性應該與您的視圖名稱匹配，例如:
<!-- index.html -->
<body>
<div ui-view="filters"></div>
<div ui-view="tabledata"></div>
<div ui-view="graph"></div>
</body> $stateProvider
.state('report', {
views: {
'filters': { ... templates and/or controllers ... },
'tabledata': {},
'graph': {},
}
}) Then each view in views can set up its own templates (template, templateUrl, templateProvider) and controllers (controller, controllerProvider).
然後，views中的每個視圖都可以設置自己的模板(template, templateUrl, templateProvider)和控制器(controller, controllerProvider)。
$stateProvider
.state('report',{
views: {
'filters': {
templateUrl: 'report-filters.html',
controller: function($scope){ ... controller stuff just for filters view ... }
},
'tabledata': {
templateUrl: 'report-table.html',
controller: function($scope){ ... controller stuff just for tabledata view ... }
},
'graph': {
templateUrl: 'report-graph.html',
controller: function($scope){ ... controller stuff just for graph view ... }
}
}
}) View Names - Relative vs. Absolute Names
視圖名稱-相對與絕對名稱
Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.
在幕後,每個視圖會被指定一個這樣形式(viewname@statename)的絕對名,其中viewname是視圖指令中使用的名稱, statename是狀態的絕對名稱,,例如contact.item。您還可以選擇在絕對語法中編寫視圖名稱。
For example, the previous example could also be written as:
例如，前面的例子也可以寫成:
.state('report',{
views: {
'filters@': { },
'tabledata@': { },
'graph@': { }
}
}) Notice that the view names are now specified as absolute names, as opposed to the relative name. It is targeting the 'filters', 'tabledata', and 'graph' views located in the root unnamed template. Since it's unnamed, there is nothing following the '@'. The root unnamed template is your index.html.
注意，視圖名稱現在被指定爲絕對名稱，而不是相對名稱。它的目標是'filters', 'tabledata'和'graph' 視圖，這些視圖位於未命名的模板中。因爲它是匿名的，所以“@”後面沒有任何東西。未命名的模板是您的index.html。
Absolute naming lets us do some powerful view targeting. Remember! With power comes responsibility. Let's assume we had several templates set up like this (this example is not realistic, it's just to illustrate view targeting):
絕對命名讓我們可以做一些強大的視圖定位。記住!與權力相伴的是責任。讓我們假設我們有幾個這樣的模板(這個例子沒有實際意義，只是爲了說明視圖的目的):
<!-- index.html (root unnamed template) -->
<body ng-app>
<div ui-view></div> <!-- contacts.html plugs in here -->
<div ui-view="status"></div>
</body> <!-- contacts.html -->
<h1>My Contacts</h1>
<div ui-view></div>
<div ui-view="detail"></div> <!-- contacts.detail.html -->
<h1>Contacts Details</h1>
<div ui-view="info"></div> Let's look at the various views you could target from within the contacts.detail state. Remember that if an @ is used then the view path is considered absolute:
$stateProvider
.state('contacts', {
// This will get automatically plugged into the unnamed ui-view
// of the parent state template. Since this is a top level state,
// its parent state template is index.html.
templateUrl: 'contacts.html'
})
.state('contacts.detail', {
views: {
////////////////////////////////////
// Relative Targeting //
// Targets parent state ui-view's //
////////////////////////////////////
// Relatively targets the 'detail' view in this state's parent state, 'contacts'.
// <div ui-view='detail'/> within contacts.html
"detail" : { },
// Relatively targets the unnamed view in this state's parent state, 'contacts'.
// <div ui-view/> within contacts.html
"" : { },
///////////////////////////////////////////////////////
// Absolute Targeting using '@' //
// Targets any view within this state or an ancestor //
///////////////////////////////////////////////////////
// Absolutely targets the 'info' view in this state, 'contacts.detail'.
// <div ui-view='info'/> within contacts.detail.html
"[email protected]" : { }
// Absolutely targets the 'detail' view in the 'contacts' state.
// <div ui-view='detail'/> within contacts.html
"detail@contacts" : { }
// Absolutely targets the unnamed view in parent 'contacts' state.
// <div ui-view/> within contacts.html
"@contacts" : { }
// absolutely targets the 'status' view in root unnamed state.
// <div ui-view='status'/> within index.html
"status@" : { }
// absolutely targets the unnamed view in root unnamed state.
// <div ui-view/> within index.html
"@" : { }
}); You can see how this ability to not only set multiple views within the same state but ancestor states could become a meritable playground for a developer :).
您可以看到，這種能力不僅可以在同一個狀態下設置多個視圖，而且可以成爲開發人員的一個走迷宮的遊樂場。
需要命理預測服務請加微信:
