angularjs – 如何设置ui-router嵌套视图

我正在尝试使用ui-router设置我的应用程序.我熟悉基本的嵌套视图,但我想要做更复杂的事情.我有主要观点的基本设置.我想有一个聊天弹出窗口,有自己的观点,独立于主要观点.我想要能够导航主视图,而不影响聊天弹出窗口中的状态.那么这怎么做呢？我需要一个抽象的状态来进行聊天吗？然后从那里嵌套视图？

这是一个视觉.

这里是一个洞穴

plunker

$stateProvider
    .state('root',{
      abstract: true,views: {
        '@': {
            template: '<ui-view />',controller: 'RootCtrl',controllerAs: 'rootCtrl'
        },'header@': {
            templateUrl: 'header.html',controller: 'HeaderCtrl',controllerAs: 'headerCtrl'
        },'footer@': {
            templateUrl: 'footer.html',controller: 'FooterCtrl',controllerAs: 'footerCtrl'
            }
       }
    })
    .state('root.home',{
        parent:'root',url:'/home',templateUrl:'home.html',controller: 'HomeController',controllerAs:'homeCtrl'
    })
     .state('root.about',url:'/about',templateUrl:'about.html'
    });
});