Question

在我的应用程序中，我有主要内容区域和屏幕外导航。主屏幕视图通过ui-view指令以角度填充。我希望我的屏幕外导航也通过ui-view指令填充。我不希望这是一个嵌套视图，我希望此视图显示根视图中的唯一内容，但基于相同的路径。像这样：

<body>
    <ui-view="root"></ui-view> <!-- Main page view is here -->
    <div id="OffscreenMenu">
        <ui-view="menu"></ui-view> <!-- This content will change each time the url changes -->
    </div>
</body>

那么我想要的是不要定义多个状态，而是让一个状态为每个视图显示两个不同的模板。

我无法找到任何可行的方法。我搜索了文档，但我能找到的只是有关嵌套视图的信息。提前谢谢。

Answer 1

您可以执行以下操作：

$stateProvider.state('state', {
    views: {
        'root@': { /* controller, templateUrl */ },
        'menu@': { /* controller, templateUrl */ }
    }
});

您还可以使用父属性：

$stateProvider
    .state('topState', {
        views: {
            'menu@': { /* controller, templateUrl */ }
        }
    })
    .state('state1', {
        parent: 'topState',
        views: {
            'root@': { /* controller, templateUrl */ }
        }
    })
    .state('state2', {
        parent: 'topState',
        views: {
            'root@': { /* controller, templateUrl */ }
        }
    });

Answer 2

我会将其设置为具有两个子视图的绝对根视图。

.state('app', {
    abstract: true,
    url: '/',
    ...
 })
.state('app.root', {
    ...
 })
.state('app.menu', {
    ...
 })

每个路由的角度ui-router多个视图

2 个答案: