如何设置 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 文件中的控制器创建聊天 service/function 并注入 index.html 和 script.js。使用 bootstrap 可折叠模式进行弹出式聊天。

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

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

Answer 2

我建议，不要将页脚用作 ui-view，因为它完全独立于您的状态。

那怎么办？

将您的页脚部分作为模板并使用 ng-include 呈现您的页脚部分。

<footer ng-include="'/footer.html'"></footer>

并且在 footer.html 中，您可以指定页脚视图的控制器。

好处

无需处理每个状态的页脚
无需在每次状态更改时都传递聊天记录。

Answer 3

我不确定你是否想使用路由进行聊天，但有两种方式可能更适合你

使用像 facebook 一样点击时可以折叠和打开的模式 Modals for bootstrap
使用角度 ngHide ngShow

对于在聊天中使用 at 子元素时的导航，您可以为聊天创建一个状态并将聊天导航嵌套到您的聊天状态中，这样任何状态更改都不会更改您的其他聊天状态。这意味着您将需要使用 substate 概念 ui-router

如何设置 ui-router 嵌套视图

how to setup ui-router nested views

nested

angularjs

angular-ui-router