Question

以故事形式：

我在这里寻找的是一个主要细节设置。主人是列表形式，当我点击链接（相对于特定的行/记录（或本例中的帐户））时，我想在主视图中看到详细信息（字面意思是“主要”视图：{{ 1}}）。

我想要这样做并维护我的网址结构（<div class="container" ui-view="main"></div>用于帐户列表; /accounts用于详细版本）但我希望详细视图使用视图列表正在使用。

我目前拥有什么

的index.html

/accounts/:id

accounts.js

...
<div class="container" ui-view="main"></div>
...

此时，$stateProvider .state ('accounts', { url: '/accounts', views: { 'main': { controller: 'AccountsCtrl', templateUrl: 'accounts/accounts.tpl.html' } }, data: { pageTitle: 'Account' } }) .state ('accounts.detail', { url: '/:id', views: { 'main': { controller: 'AccountDetailCtrl', templateUrl: 'accounts/detail.tpl.html' } }, data: { pageTitle: 'Account Detail' } });路由按预期工作。它会在/accounts视图中正确显示accounts/accounts.tpl.html。在main中，转发器中的每一行都将其链接到相应的html网址，我使用嵌套状态/accounts/:id处理该网址。

对于比我更了解此事的大多数人来说，显而易见的是，如果模板{{1}中存在该命名视图，我的accounts.detail将呈现给视图accounts.detail }} 即可。确实如此。

但这不是我想要的。我希望main内容在父accounts/accounts.tpl.html视图中呈现;我希望accounts.detail的html 替换 main中找到的accounts/detail.tpl.html的html。

那么我怎么能做到这一点？

我的解决方案背景 正如答案所说，诀窍是设置URL方案以识别哪个子状态是“默认”。我用简单的英语解释这段代码的方式是父类是抽象的，带有正确的URL，“默认”子类具有“相同”的URL（由accounts/accounts.tpl.html表示）。

如果您需要进一步明确，只需发表评论，我将分享更多指导。

index.html: <div class="container" ui-view="main"></div>

Answer 1

听起来你根本不希望视图是分层的。为此，只需将第二个州的名称更改为detail即可。

但请注意，这样做会丢失状态树的任何层次结构属性（例如，控制器代码帐户状态）。

如果你想保持控制器的层次结构，但是要执行html的替换，我会创建另一个父节点来处理控制器逻辑，但只有一个非常简单的视图<div ui-view=""></div>。 / p>

例如：

$stateProvider
    .state('app', { url: '', abstract: true, template: 'parent.html', controller: 'ParentCtrl' })
    .state('app.accounts', { url: '/accounts', templateUrl: 'accounts.tpl.html', controller: 'AccountsCtrl' })
    .state('app.detail', { url: '/accounts/:id', templateUrl: 'detail.tpl.html', controller: 'AccountDetailCtrl' });

Answer 2

您可以使用'@'来定义您选择的ui-view的绝对路径。例如：“detail @ contacts”：{}，这绝对是“联系人”状态中“详细信息”视图的目标。在contacts.html中

来源：https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

Angular UI-Router：使用父视图的子项

2 个答案: