设置动态 $http.get 请求（Angular）

Question

我想知道如何动态更改 $http 调用，以便 $http 请求 URL 根据在 ng-repeat 列表中单击的元素而有所不同。但我被困住了。

---

目前，我在索引页上设置了 ng-repeat：

<div ng-repeat="team in nt.getStandings">
    <a href="#/nation-details/{{team.team_id}}"><h2>{{team.team_name}}</h2></a>
    <p>Team ID = {{team.team_id}}</p>
</div>

变量getStandings 是通过$http 调用从API 中获取的。像这样：

在排名服务中

return $http.get(
    'http://api.com/standings/1005?Authorization=xxxx'
) 

        .success(function(data) { 
          return data; 
        }) 
        .error(function(err) { 
          return err; 
        }); 

然后将 StandingsService 附加到我的控制器中的 getStandings 变量。

“1005”是从比赛数组中调用特定数组的属性，在本例中为特定的体育比赛。

因此，在我的索引页面上，我使用 ng-repeat 列出该比赛中的所有团队。

正如您在上面的 html 中看到的那样，我已经链接了每个团队，以便它动态生成一个 URL，该 URL 将 team_id 附加到末尾，使用 $routeParams 我将其定义为变量 whichTeam。

团队详情页面

<h1>Dynamic Team ID = {{whichTeam}}</h1>

这很好用，团队ID是根据被点击的团队动态生成的。

---

就像上面的“StandingsService”一样，我有另一个名为“TeamService”的服务，它发出 $http 请求来提取团队数据。目前虽然它被静态设置为调用一个单独的团队 - 我想让服务接受 whichTeam 变量，以便调用根据点击的团队而改变。

这是静态团队 $http 请求（我已将 URL 拆分并连接以使其更清晰）：

    return $http.get(
    'http://api.com/team/' + '16110' + '?Authorization=xxxx'
    ) 

我希望引用 ONE 团队的 16110 部分成为 whichTeam 变量，允许它提取正确的个人团队数据，但我不知道如何编写（或者实际上如果可能的话）。

我希望我已经清楚了 - 如果需要，我很乐意进一步澄清。提前致谢。

Answer 1

做一个工厂：

app.factory("DataService", ["$http", function($http) {
    return {
        getTeamDetailsById: function(teamId) {
            return $http.get('path/to/api' + teamId + '?Auth=xxxx')
        }
    };
}]);

在控制器中使用它：

app.controller("MainCtrl", ["$scope", "DataService", function($scope, DataService) {
    $scope.teamDetails = {};

    $scope.getTeamDetailsById = function(event, teamId) {
        //prevent click navigation
        event.preventDefault();

        //call factory service
        DataService.getTeamDetailsById(teamId).then(function(response) {
            //success callback
            $scope.teamDetails = response.data;
        }, function(response) {
            //an error has occurred
        });
    }
}]);

在ng-repeat 元素中：

<div ng-repeat="team in teams">
    <a href ng-click="getTeamDetailsById($event, team.team_id)">{{team.team_name}}</a>
</div>

---

以上假设您只有一种状态并且仅存储在一个控制器中。如果你想使用 $stateProvider 来使用不同的状态，那么你必须使用参数，通过使用 ui-sref 并传入团队 ID。

如果您确实使用$states 和参数，请执行以下操作：

<a href ng-click="goToState($event, team.team_id)">{{ team.team_name }}</a>

$scope.goToState = function(e, teamId) {
    $state.go("teamDetailsState", { "teamId": teamId });
}