angularjs - tutorial - ui router params
UI-Router múltiples vistas nombradas no funcionan (2)
Intento usar la vista con múltiples nombres de UI-Router, pero no está funcionando.
Vea el siguiente ejemplo para entender mi problema:
start.html
<body ng-app="startApp">
<div ui-view="navigation"></div>
<div ui-view="content"></div>
</body>
nav.html
<nav>
<ul>
<li>btn1</li>
<li>btn2</li>
</ul>
</nav>
content.html
<h1>My content</h1>
app.js
angular.module(''startApp'', [''ngAnimate'', ''ui.router'', ''ngFileUpload'', ''ngImgCrop''])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state(''start'', {
url: ''/start'',
templateUrl: ''pages/start/start.html'',
controller: ''mainController''
})
.state(''start.Why'', {
url: ''/Why'',
views: {
''navigation@start'': {
templateUrl: ''pages/start/nav.html''
},
''content@start'': {
templateUrl: ''pages/start/content.html''
}
}
})
})
Problema Nada es pantalla. No se ha inyectado nada en ui-view ... Pero si mi ui-view no tiene nombre y mi id es '''' lugar de ''navigation@start'' , funciona: navigation.html se muestra ..
Intento con ''@start'' y sin. No puedo explicar cuál es el problema. Mi consola js es clara.
Puedes ayudarme por favor ?
Lo que necesitamos aquí, es crear el marcador de posición de vista sin nombre del estado ''start'' ui-view="" , dentro del index.html:
<body ng-app="startApp">
<div ui-view=""></div>
Y la vista de inicio ahora no contendrá la aplicación ng
<!--<body ng-app="startApp">-->
<div>
<h1>This is a start state view</h1>
<div>place for child state views</div>
<hr />
<div ui-view="navigation"></div>
<div ui-view="content"></div>
<!--</body>-->
</div>
Eso es ... ningún otro cambio. Ningún root (inicio) tiene un objetivo, y child (why) se inyectará correctamente
Observe la solución actual en acción aquí
También verifique:
Enrutador angular UI: estados anidados con diseños múltiples
como un enlace que agrego para ti. Intenta esto
$stateProvider
.state(''start'', {
url: ''/start'',
templateUrl: ''pages/start/start.html'',
controller: ''mainController''
})
.state(''start.Why'', {
url: ''/Why'',
views: {
''[email protected]'': {
templateUrl: ''pages/start/nav.html''
},
''[email protected]'': {
templateUrl: ''pages/start/content.html''
}
}
})