我目前正在关注AngularJS的教程。这是我的controllers.js文件中的代码。
'use strict';
angular.module ( 'F1FeederApp.controllers' , [] )
.controller ( 'driversController' , function ( $scope , ergastAPIservice ) {
$scope.nameFilter = null;
$scope.driversList = [];
ergastAPIservice.getDrivers ().success ( function ( response ) {
$scope.driversList = response.MRData.StandingsTable.StandingsLists [ 0 ].DriverStandings;
});
});
我收到以下错误:
1)$ sceDelegate策略不允许阻止来自url的加载资源。
2)TypeError:ergastAPIservice.getDrivers(...)。success不是函数
我根本不确定导致这些错误的原因,我对Angular很新。我在我和其他例子之间看到的唯一可能的差异是在这段代码中:( services.js)
'use strict';
angular.module ( 'F1FeederApp.services' , [] )
.factory ( 'ergastAPIservice' , function ( $http ) {
var ergastAPI = {};
ergastAPI.getDrivers = function () {
return $http ({
method : 'JSONP' ,
url : 'http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK'
});
};
return ergastAPI;
});
我注意到的差异在于我的getDrivers函数末尾有一个分号,并且我在文件的顶部也有use strict
语句。但是,grunt拒绝在没有这两行的情况下运行应用程序,所以我不认为这可能是问题。
如果有人能指出我在这里正确的方向,我将非常感激。
问题#1:
根据AngularJS sceDelegatePolicy,您尝试从您的应用程序请求的URL不安全。要解决此问题,您需要使用resourceUrlWhitelist
中的$sceDelegateProvider方法将应用中的网址列入白名单,如下所示:
angular.module('myApp', []).config(function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
// Allow same origin resource loads.
'self',
// Allow loading from our assets domain. **.
'http://ergast.com/**'
]);
有一个明确的解释,上面的例子来自here
问题#2:
错误TypeError: ergastAPIservice.getDrivers(...).success is not a function
的问题可能是由于您使用的AngularJS版本。传统的.success/.error
方法现在已在最新的AngularJs 1.6版中弃用。这是Deprecation notice如果你使用最新的AngularJs,这可能是原因,否则,我们需要更多信息来调试问题。
您可以使用以下内容
$scope.trustSrc = function(src) {
return $sce.trustAsResourceUrl(src);
}
and your html should have {{trustSrc(myUrl)}} instead of {{myUrl}}