带有 ui-router 和 AngularJS 的多个嵌套 ui-views [英] Multiple Nested ui-views with ui-router and AngularJS
问题描述
首先我想说的是，我查看了尽可能多的与此问题相关的堆栈溢出问题，但我没有看到与我遇到的问题有关的任何问题.有些是相似的，但不是真的.问题来了:
我设置了以下 $stateProvider:
$stateProvider.状态('根'，{网址:'',意见:{'视图A':{templateUrl: 'ViewA.html',控制器:ViewAController},'视图B':{templateUrl: 'ViewB.html',控制器:ViewBController},'视图C':{templateUrl: 'ViewC.html',控制器:ViewCContoller}}});以下是与之配套的 index.Html:
<title>Angular PoC</title><body ng-controller="DashboardController"><!-- 用于登录的帐户视图--><div ui-view="ViewA" ng-hide="currentlyLoggedIn"></div><!-- 用于切换两个主视图--><div ng-show="currentlyLoggedIn"><button ng-click="activateViewB()">视图 B </button><button ng-click="activateViewC()">查看 C </button><!-- 这是两个主要视图--><div ui-view="ViewB" ng-show="currentlyLoggedIn && currentViewB"></div><div ui-view="ViewC" ng-show="currentlyLoggedIn && currentViewC"></div>
这是 ViewC.html:
这是 ViewC<div ui-view="ViewCDetails"></div>我需要让所有的 ViewA、B、C 基本上相互独立，基本上它们都是自己的状态机.他们需要都在同一个视图中，因为所有三个都需要保持他们的状态，即使其他人之一发生变化.我遇到的最大问题是我无法初始化ViewCDetails"，并且我无法添加影响其中一个视图的任何状态，而无需冲洗其他两个视图.有没有办法添加只影响其中一个视图而不会对其他两个视图产生不利影响的状态?还要注意的是，这应该是一个 SPA，所以它不是 URL 驱动的.
$stateProvider.状态('根'，{网址:'',意见:{'视图A':{templateUrl: 'ViewA.html',控制器:ViewAController},'视图B':{templateUrl: 'ViewB.html',控制器:ViewBController},'视图C':{templateUrl: 'ViewC.html',控制器:ViewCContoller},'ViewCDetails@root':{templateUrl: 'ViewCDetails.html',控制器: ...}}});https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views
I just want to start by saying I looked through as many stack overflow questions related to this issue as I could find and I haven't seen any questions in regards to the issue I'm having. Some are similar, but not really. Here is the issue:
I have the following $stateProvider set up:
$stateProvider.
state('root', {
url: '',
views: {
'ViewA': {
templateUrl: 'ViewA.html',
controller: ViewAController
},
'ViewB': {
templateUrl: 'ViewB.html',
controller: ViewBController
},
'ViewC': {
templateUrl: 'ViewC.html',
controller: ViewCContoller
}
}
});
And the following is the index.Html to go along with it:
<head>
<title>Angular PoC</title>
</head>
<body ng-controller="DashboardController">
<!-- Account View for logging in -->
<div ui-view="ViewA" ng-hide="currentlyLoggedIn"></div>
<!-- Used to toggle the two main views -->
<div ng-show="currentlyLoggedIn">
<button ng-click="activateViewB()"> View B </button>
<button ng-click="activateViewC()"> View C </button>
</div>
<!-- These are the two main views -->
<div ui-view="ViewB" ng-show="currentlyLoggedIn && currentViewB"></div>
<div ui-view="ViewC" ng-show="currentlyLoggedIn && currentViewC"></div>
</body>
This is ViewC.html:
<div>
This is ViewC
<div ui-view="ViewCDetails"></div>
</div>
I need to have all ViewA,B,C basically act independently of one another, basically they are each their own state machines. They need to all be in the same view because all three need to keep their state, even when one of the others changes. The biggest issue I am having is that I cannot initialize "ViewCDetails" and I cannot add any states that effect one of the views without hosing the other two views. Is there a way to add states that only effect one of the Views without adversely effecting the other two views? Also to note is that this is supposed to be a SPA, so it is not URL driven.
$stateProvider.
state('root', {
url: '',
views: {
'ViewA': {
templateUrl: 'ViewA.html',
controller: ViewAController
},
'ViewB': {
templateUrl: 'ViewB.html',
controller: ViewBController
},
'ViewC': {
templateUrl: 'ViewC.html',
controller: ViewCContoller
},
'ViewCDetails@root': {
templateUrl: 'ViewCDetails.html',
controller: ...
}
}
});
https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views
这篇关于带有 ui-router 和 AngularJS 的多个嵌套 ui-views的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
