0

我已经在我的应用程序中实现了用于状态管理的 Angular UI-Router。当用户单击页面的各个部分并在视图中加载适当的信息时，它可以正常工作。但是，当用户从初始状态以外的状态刷新页面时，页面加载时就像处于初始状态一样。以下是详细信息...

这是一个帖子目录，我们拥有列出所有可用帖子的初始视图。然后我们有部分和小节。如果用户单击其中任何一个，则只会显示具有适当类别的帖子。

这是配置：

app.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('initial', {
      url: '/',
      templateUrl: 'list_posts.html'
    })
    .state('category', {
      url: '/:category',
      templateUrl: 'list_posts.html'
    })
    .state('subcategory', {
      url: '/:category/:subcategory',
      templateUrl: 'list_posts.html'
    })
    .state('singlePost', {
      url: '/:category/:subcategory/:post',
      templateUrl: 'single_post.html'
    });

  $urlRouterProvider.when('', '/');

});

我的控制器是这样工作的：

我有一个变量叫

$scope.posts = [];

然后我调用一个服务函数，以便用所有帖子对象填充数组。

然后我为成功的状态更改设置了一个监听器

  $scope.$on('$stateChangeSuccess', function () {

    $scope.updatePosts( $stateParams );

  });

如此有效，我们从“/”路径开始，如果用户单击加载特定部分，则 url 将更改，该部分的名称将在 $stateParams 中。然后监听器触发并调用 updatePosts 方法。此方法将清空帖子数组并仅使用具有该部分名称作为类别的帖子重新加载它。更新此数组后，视图将更改以反映新过滤的帖子列表。

这是 updatePosts 函数

  $scope.updatePosts = function ( cats ) {
    var length = $scope.dataset.length;
    $scope.posts = [];

    if ( Object.keys(cats).length == 0 ) {
      console.log('empty cats object');
      $scope.posts = $scope.dataset;
      console.log($scope.posts);
    }
    else if ( Object.keys(cats).length == 1 ) {
      console.log('one category');
      console.log(cats);
      for (var i = 0; i < length; i++) {
        if ( $scope.dataset[i].category_slugs.indexOf( cats.category ) > -1 ) {
          $scope.posts.push( $scope.dataset[i] );
        }

      }
    }
    else if ( Object.keys(cats).length == 2 ) {
      console.log('two categories');
      console.log(cats);
      for (var i = 0; i < length; i++) {
        if ( $scope.dataset[i].category_slugs.indexOf( cats.category ) > -1 && $scope.dataset[i].category_slugs.indexOf( cats.subcategory ) > -1 ) {
          $scope.posts.push( $scope.dataset[i] );
        }

      }
      console.log($scope.posts);
    }

  };

同样，问题是这一切都可以正常工作，直到用户决定刷新处于“类别”、“子类别”或“singlePost”状态的页面。即使网址另有说明，它也不会返回到适当的过滤帖子列表，而是恢复到初始状态。

关于问题出在哪里的任何建议？

谢谢

4

2 回答 2

0

尝试在 .config() 中进行以下更改

.state('category', {
  url: 'category/:category',
  templateUrl: 'list_posts.html'
})

在您的代码中，任何状态都没有完全匹配，并且将执行 .otherwise() 选项。例如，假设您正在从类别状态刷新。假设 url 是 'localhost/books'，其中书籍代表 /:category。由于没有带有 url '/books' 的状态，将导致选择 else();

于 2017-03-20T11:31:01.177 回答
0

当您进行硬刷新时，它会进入 stateChangeSuccess 事件吗？如果是的话，你能看到你的 $stateParams 你在 url 中有什么吗？

 $scope.$on('$stateChangeSuccess', function () {
    console.log($stateParams);
    $scope.updatePosts( $stateParams );

  });
于 2016-03-30T20:13:57.947 回答