如何使用Angular加載S3的JSON文件$ http.jsonp

我從S3加載JSON文件。文件加載成功，但問題是，我不能在我的回調函數中訪問AnglarJS模塊（$ scope，services等），因爲它是在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>

來源

2013-12-16 waqas

嗯，你是使用$http所以我猜測棱角一般是可用的。有一點惱火，因爲你說，因爲它是angularJS

外面寫有我的回調訪問$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>

體只是一個例子，你知道你的範圍上比我們做的更好哪個元素;）

來源

2013-12-20 01:08:46 angabriel

找到另一個解決方案:)。 http://stackoverflow.com/a/13400409/649388 – waqas

不錯 - 很高興你發現它很有用。 ty和聖誕快樂:) – angabriel

你不應該寫callba CK你自己。從$ http.jsonp調用所產生的承諾中使用特殊的「成功」方法應該足夠了。如果以下代碼在控制器中，您仍然應該可以訪問$ scope變量。

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

編輯我已經意識到這個答案取決於是否有在傳遞到$ http.jsonp，我懷疑角替換它定義了一些獨特的回調函數的URL字符串JSON_CALLBACK。然後服務器必須解釋這一點，並輸出JSON包裝在一個調用這個函數。這可能不適用於只提供靜態文件的S3。

來源

2013-12-16 06:25:24

日Thnx米哈爾，是的，你是正確的，這個解決方案將不會在S3的情況。任何想法我們如何才能使它工作？ – waqas

CORS如何？ http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html。然後你可以存儲標準的JSON。 IE瀏覽器的支持不是很好，雖然http://caniuse.com/cors –

是的，我知道CORS是一個選項。但這是我們的最後選擇。如果我們無法找到任何解決方案，那麼我們必須在最後啓用CORS才能使其工作。 – waqas

使用$ Q承諾庫將數據傳回的範圍

在director.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; 
     } 
    } 
};

，並在controller.js

$scope.event = eventReturn.getEvent();

來源

2013-12-19 21:06:23

我們不能向S3發送$ http（{method：'GET'...}）請求。我們必須堅持使用$ http（{method：'JSONP'...}）。如果我們想向S3發送'GET'請求，我們必須在Amazon S3上啓用交叉（CORS）域請求，否則它將不起作用。 – waqas

我創建了plunker您的方案，它就像當網頁加載它會讀來自$ http的json文件，然後調用外部js文件函數，該函數將傳遞$ scope和result數據，該外部函數將採用結果並使用scope來顯示。

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

希望這是烏拉圭回合的期待。

來源

2013-12-20 10:16:48

我們無法向S3發送$ http（{method：'GET'...}）請求。我們必須堅持使用$ http（{method：'JSONP'...}）。如果我們想向S3發送'GET'請求，我們必須在Amazon S3上啓用交叉（CORS）域請求，否則它將不起作用 – waqas

將plucker修改爲'JSONP'而不是GET http://plnkr.co/編輯/ k66KevvcIyxiKA5QSBAc？p =預覽。你能否詳細說明你的問題。 –

我使用AWS的JavaScript lib和不得不使用適用於：

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

來源

2014-02-11 23:26:30 davilj

如何使用Angular加載S3的JSON文件$ http.jsonp

回答

相關問題