javascript - sref - ui-router params
En Angular ui-enrutador cambios de URL de estado anidados, pero la plantilla no se carga (6)
En primer lugar, cambie el nombre del archivo project.settings.html
en templateurl y el nombre del archivo en projectSettings.html
(elimine el punto).
.state(''project.settings'', {
url: "/settings",
views:{
"content":{templateUrl: "partials/projectSettings.html"},
"header":{templateUrl: "partials/header"}
}
})
Agregue dos divs en la plantilla del proyecto para cargar las páginas secundarias (header abd projectSettings)
Nota: Cualquier contenido en este divs será reemplazado por la página cargada aquí.
project.html
<div ng-controller="userController">
<div class="details">
<a ui-sref=".settings" class="btn btn-primary">Settings</a>
</div>
<div ui-view="header">( Project Page header will replace with projectSettings header )</div>
<div class="container" ui-view="content">( Project Page content will replace with projectSettings Content )</div>
</div>
Estoy usando ui-router para estados y vistas anidados. Cuando hago clic en el enlace, la URL cambia a la URL del subestado, pero la plantilla no se carga.
Por ejemplo, cuando la URL cambia al project/settings
del subestado, no se carga la plantilla correspondiente project.settings.html
.
Aquí hay una SSCCE cortesía de Plunkr
Debajo está mi código también:
app.js
myApp.config(function ($stateProvider, $urlRouterProvider){
$stateProvider
.state(''project'', {
url: "/project",
views:{
"content":{templateUrl: "partials/project.html"},
"header":{templateUrl: "partials/header"}
}
})
.state(''project.settings'', {
url: "/settings",
views:{
"content":{templateUrl: "partials/project.settings.html"},
"header":{templateUrl: "partials/header"}
}
})
$urlRouterProvider.otherwise("/")
});
/* cheching whether the user is authentic or not*/
myApp.run(function($rootScope,$location,$cookieStore,validateCookie,$state) {
$rootScope.$on(''$stateChangeStart'',function(event,toState,toParams,fromState){
if($cookieStore.get(''user'')){
validateCookie.authService(function(result,error){
if(!result){
$location.path("/");
}else{
$state.go(''project.settings'');
}
});
}
else{
$location.path("/");
}
});
});
index.html
<div ng-controller="userController">
<div ui-view="header"></div>
<div class="container" ui-view="content"></div>
</div>
project.html
<div ng-controller="userController">
<div class="details">
<a ui-sref=".settings" class="btn btn-primary">Settings</a>
</div>
</div>
project.settings.html
<h1>Project Setting -State test</h1>
Si utiliza vistas anidadas con UI-enrutador, asegúrese de agregar ui-view en el html de la página principal e incluya vistas nombradas específicas.
Su estado anidado de configuración de proyectos necesita abordar la vista en el estado superior explícitamente usando un sufijo ''@'', es decir:
.state(''project.settings'', {
url: "/settings",
views:{
"content@":{templateUrl: "partials/project.settings.html"},
"header@":{templateUrl: "partials/header"}
}
})
Ver más detalles aquí https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names---relative-vs-absolute-names
Tuve el mismo problema y la solución fue colocar ui-view en la plantilla de tus padres. Debido a que sus parciales también necesitan una, si van a cargar una plantilla desde un estado secundario. Mira aquí https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#issue-my-templates-are-not-appearing--loading--showing
Tuve el mismo problema, la solución fue; abra el archivo project.html (que es la página principal) y ajuste todo dentro de <ui-view>
Por lo tanto, reemplace estos:
<div ng-controller="userController">
<div class="details">
<a ui-sref=".settings" class="btn btn-primary">Settings</a>
</div>
</div>
con estos:
<ui-view>
<div ng-controller="userController">
<div class="details">
<a ui-sref=".settings" class="btn btn-primary">Settings</a>
</div>
</div>
</ui-view>
y serás bueno para ir;)
Use ui-sref="project.settings"
para el enlace en la plantilla project.html
.