ui路由器多个命名嵌套视图

Question

我有一个类似的嵌套视图

<div ui-view="master" id="ng-view">
<div class="container-fluid height-full">
<div ui-view="globalNavigationPanel" class="row"></div> 
<div ui-view="detail" id="detailContent" class="row"></div>
</div>
</div>

这是我的解析器

function resolveShell()
{
return {
'views': {
'master': {
templateUrl: 'core/views/shell.html',
controller: 'core/controllers/shellcontroller.js',
controllerAs: 'vm',
},
'globalNavigationPanel': {
templateUrl: 'core/views/globalNavigationPanel',
controller: 'core/controllers/globalNavigationPanelController.js',
controllerAs: 'gpvm',
}
},
'resolve': {
load: [
'$q', '$rootScope', ($q, $rootScope) => {
var dependencies = [
'core/controllers/shellcontroller.js',
'core/controllers/globalNavigationPanelController.js'
];
return resolveDependencies($q, $rootScope, dependencies);
}
]
}
};
}

当我设置状态时，我可以看到下载的所有文件和调用的shellcontroller.js，但而不是globalNavigationPanelController。

此外，我无法看到globalNavigationPanel视图正在更新。

我基本上可以设置状态并解析多个命名嵌套视图吗？

Answer 1

这是因为我们使用嵌套在一个状态中的多视图。这意味着，我们必须使用绝对命名。

通过这种方式，我们可以指示UI路由器，第二个视图应该放在当前状态的其他视图中。目前还不清楚你所在州的名称，但让我们想象一下，它将是"shell">

'views': {
'master': {
...
},
'globalNavigationPanel@shell': {
....
}
},

现在，我们的'shell'状态的模板应该是(我指的是templateUrl: 'core/views/shell.html',)

<div class="container-fluid height-full">
<div ui-view="globalNavigationPanel" class="row"></div> 
<div ui-view="detail" id="detailContent" class="row"></div>
</div>

index.html应该只包含：

<div ui-view="master" id="ng-view">
</div>

因为master将包含"globalNavigationPanel"的占位符

同时检查文档

视图名称-相对名称与绝对名称

在幕后，每个视图都被分配了一个遵循viewname@statename方案的绝对名称，其中viewname是视图指令中使用的名称，state name是状态的绝对名称(例如contact.item)。您也可以选择以绝对语法编写视图名称。

例如，前面的例子也可以写成：

.state('report',{
views: {
'filters@': { },
'tabledata@': { },
'graph@': { }
}
})

请注意，视图名称现在被指定为绝对名称，而不是相对名称。它的目标是位于根未命名模板中的'filters'、'tabledata'和'graph'视图。由于它是未命名的，因此'@'后面没有任何内容。根未命名模板是您的index.html.

EXTEND-这是一个工作示例

这是状态定义：

.state('shell', {
url: '/shell',
views: {
'master' : {
templateUrl: 'core/views/shell.html',
controller: 'shellcontroller',
controllerAs: 'vm',
},
'globalNavigationPanel@shell': {
templateUrl: 'core/views/globalNavigationPanel.html',
controller: 'globalNavigationPanelController',
controllerAs: 'gpvm',
}
}
})

以下是的视图

templateUrl: 'core/views/shell.html',

<h2>shell</h2>
<p>{{text}}</p>
<hr />
<div class="container-fluid height-full">
<div ui-view="globalNavigationPanel" class="row"></div> 
<div ui-view="detail" id="detailContent" class="row"></div>
</div>

templateUrl: 'core/views/globalNavigationPanel.html',

<h3>globalNavigationPanel</h3>
<p>{{text}}</p>

而索引只包含：

<div ui-view="master" id="ng-view"></div>

点击此处查看行动