Angularjs 如何设置ui路由器嵌套视图

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

这是一个视频。

这是一个打劫者

$stateProvider
.state（'根'{
摘要：没错，
观点：{
'@': {
模板：“”，
控制器：“RootCtrl”，
controllerAs:'rootCtrl'
},
“标题@”：{
templateUrl:'header.html'，
控制器：“HeaderCtrl”，
控制员：“头颅牵引器”
},
“页脚@”：{
templateUrl:'footer.html'，
控制器：“FooterCtrl”，
controllerAs:'footerCtrl'
}
}
})
.state（'root.home'{
父项：'root'，
url:“/home”，
templateUrl:'home.html'，
控制器：“HomeController”，
controllerAs:'homeCtrl'
})
.state（'root.about'{
父项：'root'，
url:“/关于”，
templateUrl:'about.html'
});
});

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

看看你们的plunkr，你们的思路是正确的，尽管通过controllerAs从script.js注入控制器对于更大的应用程序来说是不可伸缩的

---

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

我建议，不要将页脚用作

ui视图，因为它完全独立于您所在的州。

那怎么办呢？

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

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



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

好处

不需要处理每个状态的页脚
无需在每次状态更改时传递聊天历史记录
我不确定您是否想使用route进行聊天，但有两种方式供您选择，可能更多

使用可以协作并在点击时打开的modals，就像这里的facebook一样

使用angularsngHidengShow

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

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