无法使嵌套视图与 ui-router 一起使用

Question

我已经能够用 ui-router 切换我的 angular 路由器代码，它在基本设置下工作正常。但是在我的页面上，我有一部分想要在多个视图中重复使用，但我无法让它工作。谁能看到我下面的代码有问题。

路线....

$stateProvider
.state( 'jobs', {
    url: '/jobs',
    templateUrl: templates.jobs,
    views: {
        'jobs': {
            templateUrl: templates.jobList,
            controller: 'JobListController'
        },
        'alert': {
            templateUrl: templates.alert,
            controller: 'AlertController'
        }
    }
})

templates.jobs 文件...

<div ui-view="jobs"></div>
<div ui-view="alert"></div>

然后 templates.jobList 和 templates.alert 只是普通的 html 块。

我有一个主页，其中只有一个我的应用程序最初加载的位置。正是在这个 ui-view 中，我想加载 templates.jobs 视图及其嵌套视图。

我发现，如果我从我的工作状态中删除 templateUrl: templates.jobs，然后将两个 ui-view 从该工作文件移动到我的主 html 文件有用。但是，我的主文件需要能够加载许多潜在的视图 - 主 html 上的 ui-view 只是应用程序其余部分所在的占位符。所以我的主文件中不能有这两个 ui-views。有没有办法使这项工作？谢谢

Answer 1

同时在视图对象中设置 jobs 状态的父视图并使用绝对定位：

$stateProvider.state('jobs', {
    url: '/jobs',
    views: {
        '@': {
            template: '<div ui-view="jobs"></div><div ui-view="alert"></div>',
            controller: function () {}
        },
        'jobs@jobs': {
            template: '<h2>Joblist</h2>',
            controller: function () {}
        },
        'alert@jobs': {
            template: '<h2>alert</h2>',
            controller: function () {}
        }
    }
});

Plunker 上的工作示例：http://plnkr.co/edit/AR8RK1Ik1xeGL0xUBV6e?p=preview

参考：https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names---relative-vs-absolute-names

无法使嵌套视图与 ui-router 一起使用

can't get nested views to work with ui-router

angular-ui-router