Question

我认为必须要做到这一点，但我无法弄明白。我试图在我的应用程序中添加侧边栏视图，并认为如果我可以将侧边栏作为ui-view进行操作，那将非常灵活。我遇到的问题是我不想为每个页面指定所有可能的侧边栏视图。我希望能够只在侧栏中设置视图并保持当前/主视图不变。

这Fiddle证明了我的问题。

Answer 1

我们通过引入新的抽象基础状态site解决了这个问题，该状态包含两个名为的视图content（主要区域）和sidebar。在内容区域，我们根据我们所处的状态交换模板。边栏不受更改内容状态的影响。

$stateProvider
    .state('site', {
        url: '/',
        abstract: true,
        views: {
            content: {
                template: ''
            },
            sidebar: {
                template: '<div>this is the sidebar but I also want to see page1 or page2</div>'
            }
        }
    })
    .state('page1', {
        parent: 'site',
        url: '1',
        views: {
            'content@': {
                template: '<div>This is page 1</div>'
            }
        }
    })
    .state('page2', {
        parent: 'site',
        url: '2',
        views: {
            'content@': {
                template: '<div>This is page 2</div>'
            }
        }
    });
}]);

请参阅Fiddle进行演示。

如果你想使用多个独立的视图，你应该看看ui-router-extras，因为ui-router不支持并行状态，而只是一个状态树。 This blog entry讨论了问题并提供了Plunker。

保持主ui-view相同

1 个答案: