Question

我在使用angularjs从我的服务中获取一些json信息时遇到问题。

我已经从谷歌下载了这个示例并修改了该数据，以便从数据库中获取我想要的信息。但它似乎没有工作，我不知道它在哪里打破。这是我的service.js代码：

angular.module('productServices', ['ngResource']).
    factory('Product', function ($resource) {
        return $resource('http://dev.integrator.blondgorilla.com/integratorservice/getproducts?min=0&max=15', {}, {
            query: { method: 'GET', params: { ProductID: 'products' }, isArray: true }
        });
    });

和控制器看起来像这样

function ProductListCtrl($scope, Product) {
    $scope.products = Product;
}

和product-list.html页面如下：

<div class="span10">
    <!--Body content-->

    <ul class="products">
        <li ng-repeat="product in products" class="thumbnail">
            <p>{{product.ProductID}}</p>
        </li>
    </ul>
</div>

主要的js文件是AngularSpike.js

'use strict';
angular.module('ProsPhere', ['productFilters', 'productServices']).
  config(['$routeProvider', function ($routeProvider) {
      $routeProvider.
          when('/products', { templateUrl: 'partials/product-list.html', controller: ProductListCtrl }).
          when('/products/:productId', { templateUrl: 'partials/product-details.html', controller: ProductDetailCtrl }).
          otherwise({ redirectTo: '/products' });
  }]);

我可以在

中找到我使用和修改过的代码

https://github.com/angular/angular-phonecat.git

谢谢，

Kianoush

到目前为止我发现了两个问题：

1-正如马雷克所说.query（） 2-我正在调用不同的域名，我应该使用JSONP

angular.module('productServices', ['ngResource']).
    factory('Product', function ($resource) {
        var test = $resource('http://dev.integrator.blondgorilla.com/integratorservice/getproducts', {}, {
            query: { method: 'JSONP', params: { minid: '0', maxid: '70' }, isArray: true }
        });

        return test;
    });

但我仍然看不到产品

Answer 1

这是第一个问题：

function ProductListCtrl($scope, Product) {
   $scope.products = Product;
}

那就是你要将$ resource分配给范围而不是那些可以由$ resource类检索的结果。

试试这个：

function ProductListCtrl($scope, Product) {
   $scope.products = Product.query();
}

如果还有什么问题，那么如果您创建运行的plnkr或类似的东西，我可以帮助您。

Answer 2

$ resource object方法立即返回一个空引用（对象或数组，具体取决于isArray）。一旦从服务器返回数据，就会用实际数据填充现有引用。因此ProductListCtrl中我们需要回调函数来处理这个问题。您可以使用以下代码替换控制器：

function ProductListCtrl($scope,Product){
    Product.query(function(data) {
        $scope.products=data;
    });
}

或者你可以使用它：

 function ProductListCtrl($scope, Product) {
       Product.query()
         .$promise.then(function(data) {
           $scope.products=data;
         });
    }

Angularjs获得外部服务

2 个答案: