Question

我有一个有效的应用程序虽然我正在改变架构，将视图切割成更小，更易于管理的文档。我现在有一个有孩子的州。

.state('patents', {
    url: '/patents',
    templateUrl: 'p3sweb/app/components/patents/views/list-patents.htm',
    controller: 'listPatentsCtrl',
    controllerAs: '$ctrl',
})
.state('patents.patent', {
    url: '/{patentId}/:patentHref',
    templateUrl: 'p3sweb/app/components/patents/views/patent-item.htm'
})

当我点击状态patents中的表格行时，会在其下方弹出patents.patent视图。

我现在已更改它，因此子patents.patent状态有多个视图，如下所示：

.state('patents.patent', {
    url: '/{patentId}/:patentHref',
    templateUrl: 'p3sweb/app/components/patents/views/patent-item.htm',
       views: {
        '@': {
            templateUrl: 'p3sweb/app/components/patents/views/patent-item.htm'
        },
        'patentinfo@patents.patent': {
            templateUrl: 'p3sweb/app/components/patents/views/ui-views/patent-info.htm',
            controller: 'patentInfoCtrl',
            controllerAs: '$ctrl'                
        },
        'patentcostanalysis@patents.patent': {
            templateUrl: 'p3sweb/app/components/patents/views/ui-views/patent-costanalysis.htm',
            controller: 'patentCostAnalysisCtrl',
            controllerAs: '$ctrl'
        },
        'patentrenewals@patents.patent': {
            templateUrl: 'p3sweb/app/components/patents/views/ui-views/patent-renewals.htm',
            controller: 'patentRenewalsCtrl',
            controllerAs: '$ctrl'                
        }
    })

当我现在点击状态patents中的行时，patents.patent视图将替换父视图。因此，它不是显示在它下面，而是显示的唯一视图。

问题

如何解决现在发生的问题我已在patents.patent状态中包含多个视图？

Answer 1

事实证明，在阅读ui-router wiki之后，使用@创建了一个绝对路径，而我并未定位父状态patents中的视图。

所以而不是

views: {
    '@': {
        templateUrl: 'p3sweb/app/components/patents/views/patent-item.htm'
     }

应该是

views: {
    '@patents': {
        templateUrl: 'p3sweb/app/components/patents/views/patent-item.htm'
     }

使用ui-router加载子状态时出错

1 个答案: