AngularJS errors: Blocked loading resource from url not allowed by $sceDelegate policy

Question

I'm currently following a tutorial in AngularJS. This is the code in my controllers.js file.

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

I'm getting the following errors:

1) Blocked loading resource from url not allowed by $sceDelegate policy.

2) TypeError: ergastAPIservice.getDrivers(...).success is not a function

I'm not particularly sure at all what could be causing these errors, I'm very new to Angular. The only possible differences I've seen between mine and other examples is that in this block of code: ( 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;
});

The differences I've noticed are that in mine there is a semi-colon at the end of the getDrivers function and that I have the use strict statement at the top of the file as well. However, grunt refuses to run the application without both of those lines, so I don't think that could be the issue.

If anyone could point me in the right direction here, I'd be very grateful.

Answer 1

You can use the following

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

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