ui-router активирует 404 вместо запрошенного состояния

Я использую API отдыха WordPress, и у меня есть состояния в моем приложении 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' прямо в адресной строке браузера. Когда я это делаю, angular не может обработать URL-адрес и распознает его как неправильный URL-адрес, который не соответствует ни одному состоянию, а затем ищет $urlRouterProvider.otherwise('/404'); и показывает мою 404 - Not Found страницу.

Так что не так?

Общий пакет обновлений №1

Когда я отправляю слаг поста в качестве параметра, возникает проблема, но когда я использую идентификатор поста для получения поста, он работает нормально. Поэтому я думаю, что что-то не так в слаге wp-api.

Общий пакет обновлений № 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;
  });
};

person bobsilon    schedule 07.02.2016    source источник


Ответы (1)


Может ли это быть URL для сообщений в блоге? вместо /:slug должно быть /blog/:slug?

Это будет работать при нажатии на ссылку, потому что вы указываете состояние и слаг напрямую, а не через URL-адрес.

person SirUncleCid    schedule 07.02.2016
comment
Спасибо за ответ @SirUncleCid. Я не думаю, что это причина состояния поставки. Он автоматически генерирует URL-адрес на основе состояния и его дочерних элементов. Я обновил свой вопрос. - person bobsilon; 07.02.2016
comment
Как выглядит контроллер? - person SirUncleCid; 08.02.2016
comment
Добавлен контроллер и WPService.getPost() в UPD #2. - person bobsilon; 08.02.2016
comment
Он все еще идет к 404? Единственное, что я вижу как возможную проблему, это то, что ваш getPost возвращает массив вместо одного сообщения. - person SirUncleCid; 08.02.2016
comment
ой, вы правы, я написал здесь неправильный код, я его исправил. Я использую правильный в своем коде, и он все еще идет 404. Спасибо, что ответили мне. Если я найду решение, я поместил его здесь. - person bobsilon; 08.02.2016
comment
Я все еще думаю, что это проблема с маршрутизацией, особенно с URL-адресом. Вы пробовали хотя бы url: '/blog/:slug'? - person SirUncleCid; 08.02.2016
comment
Да, я изменил URL-адрес состояния public.blog.post на /blog/:slug, и да, он работает нормально, как и ожидалось. Но теперь у меня есть два /blog в адресной строке браузера, например example.com/blog/blog/what-is-angularjs! Что не так сейчас? - person bobsilon; 08.02.2016
comment
Попробуйте, возможно, вместо этого просто «блог», «блог.пост» и т. д. - person SirUncleCid; 09.02.2016