我无法导航到状态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模板。