我正在从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;
});
}
});