角度UIルータがページの更新時に状態を認識しない

Question

私は、アプリケーションの状態管理のためにAngular UI-Routerを実装しました。ユーザーがページのさまざまな部分をクリックし、適切な情報がビューに読み込まれると、正常に機能します。ただし、ユーザーが初期状態以外の状態からページをリフレッシュすると、ページは初期状態のように読み込まれます。ここに詳細があります...

これは投稿のカタログであり、利用可能なすべての投稿をリストした初期ビューがあります。次に、セクションとサブセクションがあります。ユーザーがこれらのいずれかをクリックすると、適切なカテゴリの投稿のみが表示されます。ここで

はconfigです：

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 = []; 

という変数を持っていますすべてのポストオブジェクトを持つ配列。

は、その後、私たちは「/」ルートで開始し、ユーザーが特定のセクションをロードするためにクリックした場合、その後、URLが変更されますと、

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

    $scope.updatePosts($stateParams); 

    }); 

だから、効果的に成功した状態変化のリスナーを設定しますそのセクションの名前は$ 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 '状態です。フィルターされた投稿の適切なリストに戻るのではなく、そうでない場合でもURLが元の状態に戻ります。

問題がどこにあるかに関するご意見はありますか？

あなたはハードリフレッシュを行っているとき

Answer 1

はそれがstateChangeSuccessイベント内で起こっているありがとう！もしあなたがあなたの$ stateParamsをあなたが見たことがあるなら、これまであなたはURLに何を持っていますか？あなたのコードで

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

の.configで

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

    }); 

Answer 2

試し以下の変更は（）、そこには完全に一致のいずれかの状態のためにではありませんし、.otherwise（）オプションを実行します。例えば、あなたがカテゴリstateから爽やかになっていると考えてみましょう。ここでは、書籍が/：categoryのために立つ 'localhost/books'と仮定します。