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

Question

故事形式:

我在这里寻找的是一个主要细节设置.主人是列表形式,当我点击链接(相对于特定的行/记录(或本例中的帐户))时,我想在主视图中查看详细信息(字面意思是"主要"视图:) <div class="container" ui-view="main"></div>.

我想这样做并维护我的URL结构(/accounts对于Account列表; /accounts/:id对于详细版本)但我希望详细视图使用列表正在使用的视图.

我现在有什么

的index.html

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

accounts.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,我使用嵌套状态处理它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的替换,我会创建另一个父节点来处理控制器逻辑,但只有一个非常简单的视图<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' });

Answer 2

您可以使用'@'来定义所选ui视图的绝对路径.例如:"detail @ contacts":{},这绝对是"联系人"状态中"详细信息"视图的目标.在contacts.html内

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