
本文介绍了在 Angular ui-router 嵌套状态 url 更改,但模板未加载的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我将 ui-router 用于嵌套状态 &意见.当我点击链接时,URL 更改为子状态的 URL,但模板未加载.
例如,当 URL 更改为子状态 project/settings
时,不会加载相应的模板 project.settings.html
.
这是 Plunkr
提供的 SSCCE下面也是我的代码:
app.js
myApp.config(function ($stateProvider, $urlRouterProvider){$stateProvider.state('项目', {网址:/项目",意见:{"content":{templateUrl: "partials/project.html"},"header":{templateUrl: "partials/header"}}}).state('project.settings', {网址:/设置",意见:{"content":{templateUrl: "partials/project.settings.html"},"header":{templateUrl: "partials/header"}}})$urlRouterProvider.otherwise("/")});/* 检查用户是否真实*/myApp.run(function($rootScope,$location,$cookieStore,validateCookie,$state) {$rootScope.$on('$stateChangeStart',function(event,toState,toParams,fromState){if($cookieStore.get('user')){validateCookie.authService(函数(结果,错误){如果(!结果){$location.path("/");}别的{$state.go('project.settings');}});}别的{$location.path("/");}});});
index.html
<div ui-view="header"></div><div class="container" ui-view="content"></div>
project.html
<div class="详细信息"><a ui-sref=".settings" class="btn btn-primary">设置</a>
project.settings.html
<h1>项目设置-状态测试</h1>
解决方案
首先将templateurl中的文件名project.settings.html
和文件名改为projectSettings.html
>(删除点).
.state('project.settings', {网址:/设置",意见:{"content":{templateUrl: "partials/projectSettings.html"},"header":{templateUrl: "partials/header"}}})
在项目模板中添加两个div加载子页面(header abd projectSettings)
注意:此 div 中的任何内容都将替换为此处加载的页面.
project.html
<div class="详细信息"><a ui-sref=".settings" class="btn btn-primary">设置</a>
<div ui-view="header">(项目页面标题将替换为 projectSettings 标题)</div><div class="container" ui-view="content">(项目页面内容将替换为 projectSettings 内容)</div>
I am using ui-router for nested states & views. When I click on the link, the URL changes to the URL for the substate, but the template does not load.
For example, when the URL changes to the substate project/settings
, the corresponding template project.settings.html
is not loading.
Here is an SSCCE courtesy of Plunkr
Below is my code as well:
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>
解决方案
First of all change file name project.settings.html
in templateurl and file name to projectSettings.html
(remove dot).
.state('project.settings', {
url: "/settings",
views:{
"content":{templateUrl: "partials/projectSettings.html"},
"header":{templateUrl: "partials/header"}
}
})
Add two divs in the project template to load the sub pages (header abd projectSettings)
Note: Any content in this divs will be replaced with the page loaded here.
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>
这篇关于在 Angular ui-router 嵌套状态 url 更改,但模板未加载的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!