我無法導航到狀態UI路由器從地址欄

Question

我有一個問題，從地址欄導航到狀態或當我刷新當前狀態。 我有以下代碼：

控制器：

$scope.selectCategory = function(category) {  
$location.path('/posts/' +category.category); 
$scope.posts=[]; 
Post.query({category: category.id}).$promise.then(function(posts){ 
    $scope.category = $stateParams.category; 
    $scope.posts = posts; 
    $scope.sortBy = "-updated"; 
    $scope.letterLimit = 100; 
    $scope.postDisplayed = 6; 

    function setCurrentPost(post) { 
    $scope.currentPost = post; 
    } 
    $scope.setCurrentPost = setCurrentPost; 


}); 

}

所以在代碼上面，我結合我的職位，範圍類，當用戶點擊一個特定的類別，他將被定向到呈現該特定類別的帖子的頁面。

我打電話狀態路由器的網址如下：

app.js：

.state('posts.category', { 
    url: '/:category', 
    templateUrl: 'static/partials/post/postlist.html', 
    }) 

那麼用戶必須點擊一個特定的類別被定向到該網址。我用ng-click來實現在我的html中：

<img ng-click="selectCategory(category)" ng-src="[[category.image]]" err-src="../../../static/img/imageholder.png" alt="img01"/> 

我正在使用資源查詢從api調用帖子，如下所示。

服務：

.factory('Post', ['$resource', function($resource){ 
return $resource('/api/posts/:category', {category:'@category'}); 
}]) 

終於在渲染的帖子的頁面，我通過使用職位NG-重複循環如下：

<div ng-repeat="post in posts | limitTo:postDisplayed | filter: searchText | orderBy: sortBy" > 

到目前爲止evrything工作正常。當用戶點擊一個特定的類別時，它會被引導到正確的頁面並呈現帖子。

我的問題，如果用戶刷新頁面或嘗試通過在地址欄中輸入url訪問該頁面，或者我發送了url鏈接給某人並點擊它，頁面呈現爲空白，這意味着範圍函數selectCategory根本不被調用。換句話說，我的函數selectCategory只能通過ng-click調用，否則根本不會通過狀態路由器調用。任何想法如何解決這個問題？提前致謝。

Answer 1

從我的理解你的代碼，你沒有負責加載類別數據的代碼時，直接訪問有問題的網址。

爲了讓事情分開，而不是讓代碼複雜化，您應該爲您的posts.category狀態添加一個控制器。修改你的狀態是這樣的：

.state('posts.category', { 
    url: '/:category', 
    templateUrl: 'static/partials/post/postlist.html', 
    controller: 'PostsCategoryController' 
    }) 

然後，創建將用於您posts.category狀態的PostsCategoryController。像這樣的東西

yourModule.controller('PostsCategoryController', PostsCategoryController); 

PostsCategoryController.$inject = ['$scope', '$stateParams']; //add additional dependencies you need. 

function PostsCategoryController($scope, $stateParams){ 
    //code for handling posts category data and initialization 
} 

然後，加載並初始化您的PostsCategoryController中的數據。您可以從selectCategory方法做到這一點，採取的代碼和修改了一下，像這樣：

function PostsCategoryController($scope, $stateParams){ 

    function selectAndInitializeCategory(){ 
      //your Post.query code for getting the data (you can use $stateParams to get category) 
     } 

     selectAndInitializeCategory(); 

    } 

請注意，您必須引用您PostsCategoryController在static/partials/post/postlist.html模板。