从动态URL中检索数据 - 角度

时间:2017-09-14 09:52:22

标签: angularjs

我尝试使用以下代码检索数据,其中服务的URL具有动态参数,即。 id ,有些错误,因为数据没有显示,当我在浏览器中加载URL时,结果是:

../categories/165
我可以得到一些帮助吗?感谢。

   ...  
    .when('/categories/:categoryId', {
        controller: 'BookCategoryController',
        templateUrl: 'views/booksincategory.html'
    })
    ...

控制器

app.controller('BookCategoryController', ['$scope', 'bookcategories', '$routeParams',  function($scope, bookcategories, $routeParams) {
    bookcategories($scope.id).success(function(data) {
     console.log($scope.id);
    $scope.detail = data.books[$routeParams.categoryId];
    });
}]);

服务

  app.service('bookcategories', ['$http', function($http) {
      return {
        get: function(id) {
          return $http.get('http://52.41.65.211:8028/api/v1/categories/'+ id + '/books.json')
            .success(function(data) {
              return data;
            })
            .error(function(err) {
              return err;
            });
        }
      }
    }]);

booksincategory.html

  <div class="category col" ng-repeat="book in detail">
     <h3 class="title">{{book.title}}</h3>
  </div>

2 个答案:

答案 0 :(得分:1)

将您的服务代码更改为:

 app.service('bookcategories', ['$http', function($http) {
      return {
        getAllBooks: function(id) {
          return $http.get('http://52.41.65.211:8028/api/v1/categories/'+ id + '/books.json')
         }
      }
}]);

并在Controller中:

 bookcategories.getAllBooks($scope.id).then(function(response) {
    $scope.detail = response.data.books[$routeParams.categoryId];
 });

<强> EDIT2

您必须在控制器的某处定义$scope.id,如下所示:

$scope.id= 1 ; 
console.log($routeParams.categoryId);//check what you are getting here
bookcategories.getAllBooks($routeParams.categoryId).then(function(response) {
   $scope.detail = response.data.books[$routeParams.categoryId];
});

在此之后,您的服务网址将如下所示(从您的问题中获取此网址) http://52.41.65.211:8028/api/v1/categories/1/books.json

在网址$scope.id中查看 1

答案 1 :(得分:0)

.success&amp; .error函数(自角度1.4.X以来已弃用)不可链接友好,因此它阻止从get方法返回promise对象。删除success&amp; error回调将允许从函数返回promise对象。考虑使用.then函数而不是承诺.success&amp;不推荐使用.error回调。

get: function(id) {
  return $http.get('http://52.41.65.211:8028/api/v1/categories/'+ id + '/books.json');
}

//controller code & pass `$routeParams.categoryId` in it
bookcategories($routeParams.categoryId).then(function(response) {
    $scope.detail = response.data.books[$routeParams.categoryId];
});