angularjs – 如何设置ui-router嵌套视图

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

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

看你@你的plunkr,你是正确的轨道,尽管从script.js通过控制器注入控制器是不可扩展的大型应用程序.

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

原文地址：https://www.jb51.cc/angularjs/140821.html