我正在使用ui-router进行嵌套状态&观点。当我点击链接时,URL会更改为子状态的URL,但模板不会加载。
例如,当网址更改为子状态project/settings
时,相应的模板project.settings.html
未加载。
这是SSCCE Plunkr提供的
以下是我的代码:
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("/");
}
});
});
<div ng-controller="userController">
<div ui-view="header"></div>
<div class="container" ui-view="content"></div>
</div>
<div ng-controller="userController">
<div class="details">
<a ui-sref=".settings" class="btn btn-primary">Settings</a>
</div>
</div>
<h1>Project Setting -State test</h1>
答案 0 :(得分:23)
您的嵌套project.settings状态需要使用&#39; @&#39;明确地处理更高状态的视图。后缀,即:
.state('project.settings', {
url: "/settings",
views:{
"content@":{templateUrl: "partials/project.settings.html"},
"header@":{templateUrl: "partials/header"}
}
})
答案 1 :(得分:20)
首先将templateurl和文件名中的文件名project.settings.html
更改为projectSettings.html
(删除点)。
.state('project.settings', {
url: "/settings",
views:{
"content":{templateUrl: "partials/projectSettings.html"},
"header":{templateUrl: "partials/header"}
}
})
在项目模板中添加两个div以加载子页面(标题abd projectSettings)
注意:此div中的任何内容都将替换为此处加载的页面。
<强> 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 :(得分:3)
我遇到了同样的问题,解决方法是将ui-view放到您父母的模板中。因为你的部分也需要一个,如果他们将从子状态加载模板。 见https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#issue-my-templates-are-not-appearing--loading--showing
答案 3 :(得分:2)
如果使用带有UI路由器的嵌套视图,请务必将ui-view添加到父页面的html中并包含特定的命名视图。
答案 4 :(得分:1)
我有同样的问题,解决方案是;打开 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>
你会很高兴;)
答案 5 :(得分:0)
使用ui-sref="project.settings"
获取project.html
模板中的链接。