ui-router激活404而不是请求状态

时间:2016-02-07 15:24:18

标签: javascript angularjs wordpress angular-ui-router wp-api

我正在使用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',
    })

例如我有一篇类似&#39; http://example.com/blog/what-is-angularjs&#39;的文章。当我点击我的应用程序中的链接时,它可以正常工作:

<a ui-sref="public.blog.post({ slug: post.slug })">

但问题是当我写这个网址&#39; http://example.com/blog/what-is-angularjs&#39;直接在浏览器地址栏中。当我这样做时,angular不能处理URL并将其识别为与任何状态都不匹配的错误URL,然后它会查找 $ urlRouterProvider.otherwise(&#39; / 404&# 39;); 并显示我的404 - Not Found页面。

那么错了吗?

UPD#1

当我发送slug post的slug作为参数时会出现问题,但是当我使用post的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;
  });
};

1 个答案:

答案 0 :(得分:1)

它可能是博客文章的网址吗?而不是/:slug,它应该是/ blog /:slug?

点击链接会有效,因为你直接提供状态和slug而不是通过URL。