1

我正在尝试解析 json 文件中的数据并将其显示在我的 Angular 应用程序中，但由于某些奇怪的原因，视图不会显示数据（解释我的表达式），我认为它可能是我的控制器，但它看起来不错。任何帮助将不胜感激解决这个问题，谢谢。

下面是我的 Http 服务的代码：

app.factory('info', ['$http', function($http){ 
  return 
  $http.get('https://api.flickr.com/services/feeds/photos_public.gne?&format=json&callback=JSON_CALLBACK')
      .success(function(data){
         return data;
      })
       .error(function(err){
         return err;
       });
}]);

这是我的控制器：

app.controller('HomeController', ['$scope','info',
 function($scope) {
    info.success(function(data){
        $scope.datar = data;
  });  
}]);

这是我的观点：

<div class="main" >
  <div class="container" >
  <div class="photo" >
  <div ng-controller="HomeController" ng-repeat="data in datar">
    <p1>{{data.age}}</p1>
   <p1>{{name.modified}}</p1>
  </div>
  </div>
  </div>
</div>
4

3 回答 3

0

由于您正在查询 JSONP 端点，因此您需要使用$http.jsonp方法。并且很重要：放在后面$http.jsonp的同一行return，否则自动插入分号会变成return;基本返回undefined。

app.factory('info', ['$http', function($http) { 
  return $http.jsonp('https://api.flickr.com/services/feeds/photos_public.gne?&format=json&jsoncallback=JSON_CALLBACK')
      .then(function(response) {
          return response.data;
      });
}]);

注意参数名称jsoncallback，而不仅仅是“回调”。

之后，您的控制器也应该使用then而不是成功（已弃用）：

app.controller('HomeController', ['$scope', 'info', function($scope, info) {
    info.then(function(data) {
        $scope.datar = data;
    });  
}]);

演示： http ://plnkr.co/edit/yFomQ8jOZDRS6mZSBkGx?p=preview

于 2015-11-04T21:26:34.103 回答
0

据我所见，您正在返回数据。在 AngularJS 中没有同步调用。

你需要回报一个承诺

app.factory('info', ['$http', '$q'], function($http, $q){ 

    var defer = $q.defer();
    $http.get('https://api.flickr.com/services/feeds/photos_public.gne?&format=json&callback=JSON_CALLBACK')
           .success(function(data){
               defer.resolve(data);
           })
           .error(function(err){
               defer.reject(err);
          });

    return defer.promise;
}]);

但是您还必须将控制器更改为：

info.then(function (res) {
    $scope.datar = res;
},function(err) {
    // hande error
})
于 2015-11-04T21:34:27.287 回答
0

$http 服务将返回具有以下属性的响应：

data – {string|Object} – The response body transformed with the transform functions.
status – {number} – HTTP status code of the response.
headers – {function([headerName])} – Header getter function.
config – {Object} – The configuration object that was used to generate the request.
statusText – {string} – HTTP status text of the response.

我也认为你的工厂应该是这样的：

app.factory('info', ['$http', function($http){ 
  return {
        get : function(){ 
  $http.get('https://api.flickr.com/services/feeds/photos_public.gne?&format=json&callback=JSON_CALLBACK');
}}}]);

并在控制器中

app.controller('HomeController', ['$scope','info',
 function($scope) {
    info.get()
  .success(function(response){
        $scope.datar = response.data;
  })
  .error(function(data) {
                    console.log('Error: ' + data);
            });  
}]);

如果您使用的是谷歌浏览器，您可以尝试右键单击 -> 检查元素，您将查看是否有一些错误，或者您可以在 javascript 中放置断点以查看您收到的确切数据。

我建议作为进一步阅读：

https://docs.angularjs.org/api/ng/service/ $http

http://weblogs.asp.net/dwahlin/using-an-angularjs-factory-to-interact-with-a-restful-service

于 2015-11-04T21:42:24.500 回答