Lỗi AngularJS: Tài nguyên tải bị chặn từ url không được cho phép bởi chính sách $ sceDelegate

Question

Tôi hiện đang theo dõi hướng dẫn trong AngularJS. Đây là mã trong tệp controllers.js của tôi.

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

tôi nhận được các lỗi sau đây:

1) Bị chặn nguồn nạp từ url không được phép bởi chính sách $ sceDelegate.

2) Lỗi Loại:. ErgastAPIservice.getDrivers (...) thành công không phải là một chức năng

Tôi không đặc biệt chắc chắn ở tất cả những gì có thể gây ra những sai sót, tôi rất mới để kiễu góc. Sự khác biệt duy nhất có thể, tôi đã nhìn thấy giữa tôi và các ví dụ khác là trong khối mã này: (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; 
}); 

Sự khác biệt tôi đã nhận thấy là trong tôi có một dấu chấm phẩy ở kết thúc của hàm getDrivers và tôi có câu lệnh use strict ở đầu tệp. Tuy nhiên, grunt từ chối chạy ứng dụng mà không có cả hai dòng, vì vậy tôi không nghĩ rằng đó có thể là vấn đề.

Nếu có ai có thể chỉ cho tôi đúng hướng ở đây, tôi sẽ rất biết ơn.

Answer 1

Issue # 1:

Các url bạn đang cố gắng để yêu cầu từ ứng dụng của bạn là không an toàn theo Angulars sceDelegatePolicy. Để giải quyết nó, bạn cần vào danh sách trắng các url trong ứng dụng của bạn sử dụng resourceUrlWhitelist phương pháp trong $sceDelegateProvider như hình dưới đây:

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

Đối với một lời giải thích rõ ràng và trên ví dụ là từ here

Vấn đề # 2:

Vấn đề với lỗi TypeError: ergastAPIservice.getDrivers(...).success is not a function co uld là do phiên bản AngularJS mà bạn đang sử dụng. Phương pháp di sản .success/.error hiện không được chấp nhận trong phiên bản AngularJs 1.6 mới nhất. Đây là Deprecation notice Nếu bạn đang sử dụng AngularJs mới nhất, đó có thể là lý do, nếu không, chúng tôi cần thêm thông tin để gỡ lỗi vấn đề.