如何设置ui路由器嵌套视图 [英] 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?

这是视觉效果.

这是一个小矮人

朋克车

 $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.使用Bootstrap可折叠模式进行弹出式聊天.

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路由器嵌套视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！