如何使用表达式从视图中的 Angular 服务访问 JSONP 数据



我正在构建一个基于 Angular 的应用程序来显示来自 Strava API 的数据。我尝试过使用 $http.get,但我宁愿使用单独的服务,所以我的代码驻留在逻辑位置,所以我的控制器没有做很多事情,只需调用我的服务。

我有三个用于此逻辑的文件:服务,控制器和视图。访问令牌是从 Strava 获取的,用于获取外部源中的帐户信息。

为我服务:

 /* Services */
 var access_token = "my_access_token";
stravaApp.factory('StravaActivities', function($resource) {
   return $resource('https://www.strava.com/api/v3/athlete/activities?access_token=' + access_token, {}, {
        getJSONP: {
          method: 'JSONP',
          isArray: true,
          params: {
              callback: 'JSON_CALLBACK'
          }
        }
      });
    });

在我的控制器中

/**
 * @ngdoc function
 * @name stravaApp.controller:SitecontentCtrl
 * @description
 * # SitecontentCtrl
 * Controller of the stravaApp
 */
angular.module('stravaApp').controller('SitecontentCtrl', ['$scope', 'StravaActivities',
  function($scope, StravaActivities) {
    $scope.activities = StravaActivities.getJSONP();
  }]);

在我的模板/视图中

<ul class="act">
<li ng-repeat="act in activities | filter:query | orderBy:orderProp"
    class="thumbnail act-listing">
    <pre>{{activities | json }}</pre>
</li>
</ul>

调用的 json 文件为:https://www.strava.com/api/v3/athlete/activities?access_token=my_access_token&callback=angular.callbacks._0

我找不到使用表达式访问视图中数据的方法,例如 {{ acts.id }}。当我使用 {{ act | json }} 时,我会收到完整的 JSON 文件,但我无法使用我尝试的解决方案从 json 访问单个部分。我认为问题与回调有关。由于 Strava API 不支持 CORS,我必须使用 JSONP。

我发现了一个有确切问题的帖子,但是没有提供解决方案,代码示例使用的是 $http.get,我想在我的服务中使用$resource。

谁能为我提供解决方案?提前感谢!

        (function() {
    app.controller('StravaController', function($scope, $http) {
    $http({ method: 'JSONP', url: 'https://www.strava.com/api/v3/athlete?per_page=1&access_token=your_token_here&callback=JSON_CALLBACK' }).success(function (data) {
            console.log('hello');
            $scope.athlete = data; // response data 
        }).
        error(function (data) {
            console.log(data);
        });
    });
})();

我现在觉得自己真的很愚蠢。我收到了开发人员的答复。这个问题与角度完全无关。似乎在 Strava 中,段被标记为私有,因此 API 返回 401。现在,我可以从我的应用调用任何终结点。

最新更新