![](/img/trans.png)
[英]Angular-Ui-Router state changes but template URL doesn't load for nested states
[英]angular-ui-router nested views the page doesn't loading when direct url is used or refresh
我有这个可以正常工作的plunker ,它可以更好地看到这里,但是有一个错误,当通过可点击的链接导航到嵌套状态时,我得到了所需的行为,但是当刷新页面或写入URL并按下进入页面时页面没有某些州没有加载。 我有4个国家:
对于前2个刷新页面或选择URL并按Enter键将加载配置文件视图而不是关于视图,第二个2工作正常。 路由器配置是这样的:
$urlRouterProvider.otherwise("/home");
// route 1
$stateProvider.state('home' , {
url: "/home",
templateUrl: "home.html"
});
// route 2
$stateProvider.state('profile' , {
controllerAs: "Profile",
url: "/profile",
templateUrl: "profile.html",
controller: "ProfileController"
});
// user route
$stateProvider.state('profile.user' , {
controllerAs: "Profile",
url: "^/:username",
controller: "ProfileController",
template: "<div ui-view></div>",
resolve: {
username: ['$stateParams', function ($stateParams) {
return $stateParams.username;
}]
}
});
// route 3
$stateProvider.state('settings' , {
url: "/settings",
templateUrl: "settings.html"
});
// user about route
$stateProvider.state('profile.about', {
controllerAs: "About",
url: "^/about",
templateUrl: "about.html",
controller: "AboutController2"
});
// user about route
$stateProvider.state('profile.user.about', {
controllerAs: "About",
url: "/about",
templateUrl: "about.html",
controller: "AboutController"
});
// user about route
$stateProvider.state('profile.user.feed', {
controllerAs: "Feed",
url: "/feed",
templateUrl: "feed.html",
controller: "AboutController"
});
$stateProvider.state('profile.feed', {
controllerAs: "Feed",
url: "^/feed",
templateUrl: "feed.html",
controller: "AboutController2"
});
我不是html5mode如看到plunker和我播种此SO ,但没有答案在那里。
有关如何解决此问题的任何帮助,请提前感谢。
我在发布问题后几秒钟发现的问题是路由定义没有正确排序。
state profile.user有一个动态url参数,因此在profile.user之后定义profile.feed或profile.about会导致此错误,因此定义profile.about和profile.feed应该在profile.user之前。 :
$urlRouterProvider.otherwise("/home");
// route 1
$stateProvider.state('home' , {
url: "/home",
templateUrl: "home.html"
});
// route 2
$stateProvider.state('profile' , {
controllerAs: "Profile",
url: "/profile",
templateUrl: "profile.html",
controller: "ProfileController"
});
// route 3
$stateProvider.state('settings' , {
url: "/settings",
templateUrl: "settings.html"
});
// user about route
$stateProvider.state('profile.about', {
controllerAs: "About",
url: "^/about",
templateUrl: "about.html",
controller: "AboutController2"
});
$stateProvider.state('profile.feed', {
controllerAs: "Feed",
url: "^/feed",
templateUrl: "feed.html",
controller: "AboutController2"
});
// user route
$stateProvider.state('profile.user' , {
controllerAs: "Profile",
url: "^/:username",
controller: "ProfileController",
template: "<div ui-view></div>",
resolve: {
username: ['$stateParams', function ($stateParams) {
return $stateParams.username;
}]
}
});
// user about route
$stateProvider.state('profile.user.about', {
controllerAs: "About",
url: "/about",
templateUrl: "about.html",
controller: "AboutController"
});
// user about route
$stateProvider.state('profile.user.feed', {
controllerAs: "Feed",
url: "/feed",
templateUrl: "feed.html",
controller: "AboutController"
});
希望这能帮助别人不要浪费时间在这么简单的错误上。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.