带有ui-router和AngularJS的多个嵌套ui-views [英] Multiple Nested ui-views with ui-router and AngularJS
问题描述
我只想开始说，我遍历了与该问题有关的尽可能多的堆栈溢出问题，而对于所遇到的问题，我没有看到任何问题.有些是相似的，但不是真的.这是问题所在:
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:
我设置了以下$ stateProvider:
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
}
}
});
以下是索引.与之配套的HTML:
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>
这是ViewC.html:
This is ViewC.html:
<div>
This is ViewC
<div ui-view="ViewCDetails"></div>
</div>
我需要让所有ViewA，B，C基本上彼此独立运行，基本上它们每个都是自己的状态机.他们必须都处于同一视图中，因为这三个人都需要保持其状态，即使其中一个发生更改也是如此.我遇到的最大问题是，我无法初始化"ViewCDetails"，也无法添加任何会影响其中一个视图的状态，而不需要另两个视图.有没有一种方法可以添加仅影响其中一个视图而不会负面影响其他两个视图的状态?还要注意的是，这应该是SPA，因此它不是URL驱动的.
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/多名称视图
这篇关于带有ui-router和AngularJS的多个嵌套ui-views的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
