如何设置 ui-router 嵌套视图 [英] how to setup ui-router nested views

问题描述

我正在尝试使用 ui-router 设置我的应用程序.我熟悉基本的嵌套视图，但我想做一些更复杂的事情.我有主要视图的基本设置.我想要一个聊天弹出窗口，它有自己的独立于主视图的视图.我希望能够浏览主视图而不影响聊天弹出窗口中的状态.那么这是如何做到的呢?我需要为聊天设置抽象状态吗?然后从那里嵌套视图?

I am trying to setup my app with ui-router. I am familiar with basic nested views but I am wanting to do something more complex. I have my basic setup for the main views. I would like to have a chat popup that has its own views that are independent from the main views. I want to be able to navigate the main views and not affect the states in the chat popup. So how is this done? Do i need to have a abstract state for the chat? and then have nested views from there?

这是一个视觉效果.

这里有一个 plunker

and here is a plunker

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

推荐答案

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

Create Chat service/function with controllers in different js files and inject to the index.html and script.js. use bootstrap collapsible modal for pop-up chats.

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

Looking @ your plunkr, you're on right track,though injecting controller from script.js via controllerAs is not scalable for larger app.

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

Instead you can create js files for each controller and service and separate partial views, just need to inject the services and controllers to index.html and mention partial views in stateprovider function.

这篇关于如何设置 ui-router 嵌套视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！