保持主ui-view相同

Question

我认为必须有办法做到这一点,但我无法弄明白.我正在尝试为我的应用程序添加侧边栏视图,并认为如果我可以将侧边栏作为一个侧边栏,那将是非常光滑的ui-view.我遇到的问题是我不想为每个页面指定每个可能的侧边栏视图.我希望能够只在侧栏中设置视图并保持当前/主视图相同.

这个小提琴演示了我的问题.

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>'
            }
        }
    });
}]);

请参阅小提琴进行演示.

如果你想使用多个独立的视图,你应该看看ui-router-extras,因为ui-router不支持并行状态,而只是一个状态树.此博客文章讨论了该问题,并提供了一个Plunker.