2015-01-21 78 views
0

我正在研究一个将考虑AWS实例成本的计算器。我从亚马逊的.js文件中提取数据,我想将它读入一个对象,但我一直收到一个错误“Uncaught ReferenceError:callback is not defined”..这里是我的.js文件。http.jsonp和javascript中的回调函数

(function() { 
    var app = angular.module('formExample', []); 

    var ExampleController = function($scope, $http) { 
    $scope.master = {}; 

    $scope.update = function(user) { 
     $scope.master = angular.copy(user); 
     $scope.GetAws(); 
    }; 

    $scope.reset = function() { 
     $scope.user = ""; 
    }; 

    function callback(data) { 
     $scope.aws = data; 
    } 

    $scope.GetAws = function() { 
     var url = "http://a0.awsstatic.com/pricing/1/ec2/linux-od.min.js?callback=callback"; 
     $http.jsonp(url); 
    }; 

    $scope.reset(); 
    }; 
    app.controller('ExampleController', ['$scope', '$http', ExampleController]); 
}()); 

回答

2

你使用的aws链接支持jsonp,但它不采用自定义回调函数名,这很奇怪。 (至少您可以查看它们查找的查询字符串是否为callback)。当我们提供callback=JSON_CALLBACK时,它会将其转换为angular.callbacks_x,它们将临时全局公开,以处理请求并相应地解决承诺。但为此,端点必须采用回调参数并将该响应包装在相同的字符串和函数调用中。然而,这个端点似乎没有考虑它,即使没有任何回调,它也会自动包装到默认的callback函数调用中。所以你需要注入$window(正确的DI方式)对象,并设置callback函数,?callback=callback是无关紧要的。

var ExampleController = function($scope, $http, $window) { 
    $scope.master = {}; 

    //.... 

    $window.callback = function(data) { 
     $scope.aws = data; 
    } 

    $scope.GetAws = function() { 
     var url = "http://a0.awsstatic.com/pricing/1/ec2/linux-od.min.js?callback=callback"; 
     $http.jsonp(url); 
    }; 

    $scope.reset(); 
    }; 

    app.controller('ExampleController', ['$scope', '$http', '$window', ExampleController]); 

Plnkr

+0

查看查询字符串参数是回调本身,还是期望不同的名称。 – PSL 2015-01-21 02:05:23

+1

这是一个比我建议的更好的解决方案。实际上我会回到一些我使用这种方法进行更新的应用程序。 – idotpdot 2015-01-21 15:43:53

1

这是因为AWS脚本正在调用全局作用域(Angular之外)的一个名为“callback”的函数。由于您的功能在另一个(IIFE)功能的范围内,因此无法访问它。

我在这种情况下所做的只是把它放在全局范围内。

在应用程序需要一些API已经载入前角可以做它的神奇和具有类似情况的一个回调的情况下,我也做了以下内容,请手动自举角:

的index.html

<script src="http://www.example.com/api?callback=myCallbackFunction"></script> 

app.js

// callback function, in global (window) scope 
function myCallbackFunction() { 

    // manually bootstrap Angular 
    angular.element(document).ready(function() { 
    angular.bootstrap(document, ['myApp']); 
    }); 

} 


// your IIFE 
(function() { 

})(); 
1

通知callbackwindow范围进行设置。 因此,一种解决方案是这样的:

$scope.reset = function() { 
    $scope.user = ""; 
}; 

window.callback = function(data) { 
    $scope.aws = data; 
} 

$scope.GetAws = function() { 
    var url = "http://a0.awsstatic.com/pricing/1/ec2/linux-od.min.js?callback=callback"; 
    $http.jsonp(url); 
};