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.
