AngularJS错误:阻止从$ sceDelegate策略允许的URL加载资源

Question

我目前正在关注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拒绝在没有这两行的情况下运行应用程序,所以我不认为这可能是问题.

如果有人能指出我在这里正确的方向,我将非常感激.

Answer 1

问题#1:

根据AngularJS sceDelegatePolicy,您尝试从应用程序请求的URL 不安全.要解决此问题,您需要使用$ sceDelegateProvider中的resourceUrlWhitelist方法 将应用中的网址列入白名单,如下所示:

angular.module('myApp', []).config(function($sceDelegateProvider) {  
$sceDelegateProvider.resourceUrlWhitelist([
    // Allow same origin resource loads.
    'self',
    // Allow loading from our assets domain. **.
    'http://ergast.com/**'
  ]);

有关清楚的解释,上面的例子来自这里

问题#2:

错误的问题TypeError: ergastAPIservice.getDrivers(...).success is not a function可能是由于您使用的AngularJS版本.遗留.success/.error方法现在已在最新的AngularJs 1.6版中弃用.以下是弃用通知如果您使用的是最新的AngularJ,可能是原因,否则,我们需要更多信息来调试问题.

Answer 2

您可以使用以下

$scope.trustSrc = function(src) {
    return $sce.trustAsResourceUrl(src);
}

and your html should have {{trustSrc(myUrl)}} instead of {{myUrl}}