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

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

那怎么样？

将页脚部分设为模板，并使用ng-include呈现页脚部分。

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

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

<强>优势

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

Answer 2

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

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

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

Answer 3

我不确定您是否想要使用路线进行聊天，但有两种方法可能会更多

使用可以协作并在点击时打开的模式，就像facebook的那样 Modals for bootstrap
使用angulars ngHide ngShow

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

子状态

如何设置ui-router嵌套视图

3 个答案: