【问题标题】:ui-router activates 404 instead of requested stateui-router 激活 404 而不是请求状态
【发布时间】:2016-02-08 21:08:39
【问题描述】:

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

【问题讨论】:

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


    【解决方案1】:

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

    它可以通过单击链接来工作,因为您直接提供状态和 slug 而不是通过 URL。

    【讨论】:

    • 感谢您回答@SirUncleCid。我不认为这是供应状态的原因。它会根据状态和子节点自动生成 URL。我更新了我的问题。
    • 控制器长什么样子?
    • 将控制器和 WPService.getPost() 添加到 UPD #2
    • 仍然是 404?我能看到的唯一可能的问题是您的 getPost 返回一个数组而不是单个帖子。
    • 我仍然认为这是路由的问题,特别是 url。您是否尝试过 url: '/blog/:slug' 至少?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2021-09-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多