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

Question

以故事形式：

我在这里寻找的是主从设置。母版是列表形式的，当我单击一个链接（相对于特定的行/记录（在这种情况下为Account））时，我想在主视图（直译为“主”视图：）中查看详细信息<div class="container" ui-view="main"></div>。

我想这样做并维护我的URL结构（/accounts用于帐户列表；/accounts/:id用于详细版本），
但是我希望详细视图使用列表正在使用的视图 。

我目前有什么

index.html

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

account.js

$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/:idURL，我正在使用nested
state处理该URL accounts.detail。

对于大多数比我了解更多的人来说，显而易见的是， 如果模板中存在该命名视图
，我accounts.detail将呈现给该视图。确实是这样。main accounts/accounts.tpl.html

但这不是我想要的。我希望这些accounts.detail东西在父main视图中呈现；我想的HTML
accounts/detail.tpl.html来 替换 的HTML
accounts/accounts.tpl.html发现index.html: <div class="container" ui- view="main"></div>。

那我该怎么做呢？

我在上下文中 的 解决方案
答案是，诀窍是设置URL方案以标识哪个子状态为“默认”。我用普通英语解释此代码的方式是，父类是带有正确URL的抽象类，而“默认”子类具有“相同”
URL（用表示''）。

如果您需要进一步的说明，请发表评论，我们将分享更多指导。

.config(function config( $stateProvider ) { $stateProvider
    .state ('accounts', {
        abstract: true,
        url: '/accounts',
        views: {
            'main': {
                templateUrl: 'accounts/accounts.tpl.html',
                controller: 'AccountsCtrl'
            }
        },
        data: { pageTitle: 'Accounts' }
    })
    .state ('accounts.list', {
        url: '',
        views: {
            'main': {
                templateUrl: 'accounts/list.tpl.html',
                controller: 'AccountsListCtrl'
            }
        },
        data: { pageTitle: 'Accounts List' }
    })
    .state ('accounts.detail', {
        url: '/:id',
        views: {
            'main': {
                templateUrl: 'accounts/detail.tpl.html',
                controller: 'AccountDetailCtrl'
            }
        },
        data: { pageTitle: 'Account Detail' }
    });

Answer 1

听起来您只是不想让视图分层。为此，只需将第二个状态的名称更改为detail。

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

如果您想保持控制器的层次结构，但是执行html的替换，我将在其他两个之上创建另一个父级，以处理控制器逻辑，但是只有一个非常简单的view <div ui- view=""></div>。

例如：

$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' });