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;


});

}

所以在上面的代码中我将我的帖子绑定到范围类别，当用户点击某个特定类别时，他将被定向到一个页面，该页面呈现该特定类别的帖子。

我在状态路由器中调用url如下：

app.js：

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

然后用户必须单击要定向到该URL的特定类别。我使用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-repeat循环播放帖子，如下所示：

<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'
  })

然后，创建一个PostsCategoryController，用于posts.category州。像这样的东西

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。

我无法从地址栏导航到ui路由器状态

1 个答案: