Question

我已经在我的应用程序中实现了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 = [];

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

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

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

    $scope.updatePosts( $stateParams );

  });

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

这是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);
    }

  };

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

有关问题所在的任何建议吗？

谢谢

Answer 1

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

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

  });

Answer 2

尝试跟踪.config（）

中的更改

.bash_profile

在您的代码中，任何状态都没有完全匹配，并且会执行.otherwise（）选项。例如，考虑你是从类别状态刷新。让我们假设url是'localhost / books'，其中书代表/:category。因为没有url'/ books'的状态，将导致选择否则（）;

Angular UI-Router无法识别页面刷新状态

2 个答案: