В Angular URL-адрес вложенного состояния uri-маршрутизатора, но шаблон не загружается
Я использую ui-router для вложенных состояний и представлений. Когда я нажимаю на ссылку, URL-адрес изменяется на URL-адрес для подстанции, но шаблон не загружается.
Например, когда URL-адрес изменяется на подэлемент project/settings
, соответствующий шаблон project.settings.html
не загружается.
Вот любезность SSCCE Plunkr
Ниже приведен мой код:
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>
Ответы
Ответ 1
Прежде всего измените имя файла project.settings.html
в templateurl и имя файла на projectSettings.html
(удалить точку).
.state('project.settings', {
url: "/settings",
views:{
"content":{templateUrl: "partials/projectSettings.html"},
"header":{templateUrl: "partials/header"}
}
})
Добавьте два div в шаблон проекта, чтобы загрузить вспомогательные страницы (header abd projectSettings)
Примечание. Любое содержимое в этих divs будет заменено на страницу, загруженную здесь.
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>
Ответ 2
Вложенное состояние project.settings должно адресовать представление в более высоком состоянии явно с использованием суффикса '@', то есть.:
.state('project.settings', {
url: "/settings",
views:{
"[email protected]":{templateUrl: "partials/project.settings.html"},
"[email protected]":{templateUrl: "partials/header"}
}
})
Подробнее см. здесь https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names---relative-vs-absolute-names
Ответ 3
У меня была такая же проблема, и решение заключалось в размещении ui-view в родительском шаблоне. Потому что ваши частичные части также нуждаются в слишком, если они будут загружать шаблон из дочернего состояния.
См. Здесь https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#issue-my-templates-are-not-appearing--loading--showing
Ответ 4
Если вы используете вложенные представления с UI-маршрутизатором, обязательно добавьте ui-view в html родительской страницы и включите определенные именованные представления.
Ответ 5
У меня была та же проблема, решение было; откройте файл project.html (который является родительской) и завершите все в <ui-view>
Итак, замените их:
<div ng-controller="userController">
<div class="details">
<a ui-sref=".settings" class="btn btn-primary">Settings</a>
</div>
</div>
с этими:
<ui-view>
<div ng-controller="userController">
<div class="details">
<a ui-sref=".settings" class="btn btn-primary">Settings</a>
</div>
</div>
</ui-view>
и вам будет хорошо идти;)
Ответ 6
Используйте ui-sref="project.settings"
для ссылки в шаблоне project.html
.