如何设置ui-router嵌套视图

Question

我正在尝试使用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',{
        parent:'root',
        url:'/about',
        templateUrl:'about.html'
    });
});

Answer 1

使用不同 js 文件中的控制器创建聊天服务/功能，并注入到 index.html 和 script.js。使用引导可折叠模式进行弹出聊天。

看看@你的plunkr，你走在正确的轨道上，尽管通过controllerAs从script.js注入控制器对于更大的应用程序来说是不可扩展的。

相反，您可以为每个控制器和服务创建 js 文件以及单独的部分视图，只需将服务和控制器注入到 index.html 并在 stateprovider 函数中提及部分视图即可。