template sref example javascript angularjs angular-ui-router

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.




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 .