sref - Múltiples vistas ui anidadas con ui-router y AngularJS
ui-sref angularjs (1)
Solo quiero comenzar diciendo que revisé todas las preguntas de desbordamiento de pila relacionadas con este problema que pude encontrar y no he visto ninguna pregunta con respecto al problema que tengo. Algunos son similares, pero no realmente. Aquí está el problema:
Tengo el siguiente $ stateProvider configurado:
$stateProvider.
state(''root'', {
url: '''',
views: {
''ViewA'': {
templateUrl: ''ViewA.html'',
controller: ViewAController
},
''ViewB'': {
templateUrl: ''ViewB.html'',
controller: ViewBController
},
''ViewC'': {
templateUrl: ''ViewC.html'',
controller: ViewCContoller
}
}
});
Y lo siguiente es el index.Html para acompañarlo:
<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>
Esto es ViewC.html:
<div>
This is ViewC
<div ui-view="ViewCDetails"></div>
</div>
Necesito que todos los ViewA, B, C actúen de forma independiente, básicamente, cada uno es su propio estado. Deben estar todos en el mismo punto de vista porque los tres necesitan mantener su estado, incluso cuando uno de los otros cambia. El mayor problema que tengo es que no puedo inicializar "ViewCDetails" y no puedo agregar ningún estado que afecte a una de las vistas sin administrar las otras dos vistas. ¿Hay una manera de agregar estados que solo afecten a una de las Vistas sin afectar negativamente a las otras dos vistas? También se debe tener en cuenta que se supone que esto es un SPA, por lo que no se controla mediante URL.
$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