如何使用Angular$http.jsonp从S3加载JSON文件

How to load JSON file from S3 using Angular $http.jsonp

本文关键字：S3 加载 JSON 文件 jsonp 何使用 Angular http      更新时间：2023-09-26

我正在从S3加载JSON文件。文件加载成功，但问题是，我无法访问回调函数中的AnglarJS模块（$scope、服务等），因为它是在angularJS之外编写的。有没有办法在我的回调中访问$scope？

AngularJS代码

var url = "http://my_s3_url/abc/v1/klm/my.json"
$http.jsonp(url);

my.json

jsonp_callback({name:"xyz",age:2})

回调

<script>
   function jsonp_callback(data) {
      console.log(data.name);
      // cannot access $scope here :(
   }
</script>

嗯，您使用的是$http，所以我想angular通常是可用的。

有办法在我的回调中访问$scope吗
如果脚本块在同一文档中，则可以通过执行（即angular.element('body').scope()）来访问任何范围。

<script>
  function jsonp_callback(data) {
    console.log(data.name);
    
    // access $scope here :)
    var scope = angular.element('body').scope();
    scope.$apply(function() {
      scope.lastResult = data;
    });
  }
</script>

元素body仅用作示例。它可能适用于与目标范围相关的任何DOM元素。

您不应该自己编写回调函数。从$http.jsonp调用得到的promise中使用特殊的"success"方法就足够了。如果以下代码在控制器中，则您应该仍然可以访问$scope变量。

$http.jsonp(url).
success(function(data, status, headers, config) {
    // The data is here
}).

编辑我意识到这个答案取决于传递给$http.jsonp的url中是否有一个字符串JSON_CALLBACK，我怀疑Angular用它定义的一些独特的回调函数替换了它。然后，服务器必须对此进行解释，并输出封装在此函数调用中的JSON。这可能在S3上不起作用，因为S3只提供静态文件。

使用$q promise库将数据传递回作用域

在目录.js 中

function eventReturn($http, $q){   
   return {
      getEvent: function(){
          var deferred = $q.defer();
          $http({method:'GET', url'http://my_s3_url/abc/v1/klm/my.json'}).
              success(function(data, status, headers, config){
                  deferred.resolve(data);
          });
          return deferred.promise;
      }
   }
};

和控制器js

$scope.event = eventReturn.getEvent();

我已经为您的场景创建了plunker，就像在页面加载时，它会从$http读取json文件，然后调用外部js文件函数，它会向该函数传递$scope和结果数据，该外部函数通过使用scope获取结果并显示。

网址：http://plnkr.co/edit/k66KevvcIyxiKA5QSBAc?p=preview

希望这就是你的样子。

我使用AWS javascript库，必须使用apply:

AWS.config.update({accessKeyId: '?', secretAccessKey: '?'});
var s3 = new AWS.S3({ maxRetries: 5});
console.log("S3 correctly configured");
s3.listObjects( {Bucket : 'bucketName', Prefix : 'foo/bar/' }, function (err, data) {
    if (err) {
        console.log(err); // an error occurred
    } else {
        console.log(data); // successful response
        sc.$apply(function() {
            sc.prefix = data.Prefix;
            sc.data = data;
        });
    }
});
相关文章：