我正在使用 WordPress REST API,并且我的 AngularJS 应用程序中有如下状态:
.state('public.blog', {
abstract: true,
url: '/blog',
template: '<ui-view/>',
})
.state('public.blog.home', {
url: '/',
templateUrl: 'public/blog.html',
controller: 'PublicBlogCtrl',
controllerAs: 'vm',
})
.state('public.blog.post', {
url: '/:slug',
templateUrl: 'public/blog.post.html',
controller: 'PublicBlogPostCtrl',
controllerAs: 'vm',
})
例如,我有一篇类似“ http://example.com/blog/what-is-angularjs ”的文章。当我点击我的应用程序中的链接时,它工作正常,如下所示:
<a ui-sref="public.blog.post({ slug: post.slug })">
但问题是当我直接在浏览器地址栏中编写 URL ' http://example.com/blog/what-is-angularjs ' 时。当我这样做时,角度无法处理 URL 并将其识别为与任何状态都不匹配的错误 URL,然后它会查找$urlRouterProvider.otherwise('/404'); 并显示我的404 - Not Found
页面。
那么怎么了?
UPD #1
当我将 slug 帖子的 slug 作为参数发送时,会出现问题,但是当我使用帖子的 ID 来检索帖子时,它工作正常。所以我认为 wp-api 的 slug 有一些问题。
UPD #2
控制器如下所示:
function PublicBlogPostCtrl($scope, $stateParams, WPService) {
var vm = this;
WPService.getPost($stateParams.slug).success(function(res) {
$scope.post = res[0];
}).error(function(err) {
console.error(err);
});
}
app.controller('PublicBlogPostCtrl', PublicBlogPostCtrl);
如下WPService.getPost
:
WPService.getPost = function(slug) {
return $http.get('wp-json/wp/v2/posts/?filter[name]=' + slug).success(function(res, status, headers) {
return res;
}).error(function(err) {
return err;
});
};