AngularJS: 如何通过控制器中的服务方法传递id

Question

我正在开发一个 AngularJS 网络应用程序。我有以下路由配置：

  $routeProvider.
    when("/drivers", {templateUrl: "partials/drivers.html", controller: "driversController"}).
    when("/drivers/:id",{templateUrl: "partials/driver.html", controller: "driverController"}).
    otherwise({redirectTo: '/drivers'});
}]);

因此，为了传递 JSON 的 ID，我在 service.js 文件中使用了以下方法

F1API.getDriverDetails = function(id) {
        return  $http({
            method: 'JSONP', 
            url: 'http://localhost:8000/app/data/' + id + '/driverStandings.json?callback=JSON_CALLBACK'
        });
    }

    F1API.getDriverRaces = function(id) {
        return  $http({
            method: 'JSONP', 
            url: 'http://localhost:8000/app/data/' + id + '/results.json?callback=JSON_CALLBACK'
        });
    }

    return F1API;
  });

但现在我遇到了困难。我需要这个方法来分配 driver 和他在 object 中的比赛。但是我需要这个 id，所以我在 controller.js

中尝试了

/* Driver controller */
controller('driverController', function($scope, $routeParams, F1APIservice) {


    $scope.id = $routeParams.id;
    $scope.races = [];
    $scope.driver = null;

    F1APIservice.getDriverDetails(id).success(function(response){
      $scope.driver = response.MRData.StandingsTable[0].DriverStandings[0];
    });

    F1APIservice.getDriverRaces(id).success(function(response){
      $scope.races = response.MRData.RaceTable.Races;
    });
});

我在构建我的网络应用程序时不知道 ID。我做错了什么？

Answer 1

在您的控制器中，您将 $routeParams.id 分配给 $scope.id，但随后您仅使用未定义的 id 调用 getDriverDetails 和 getDriverRaces。您需要这样称呼它们：getDriverDetails( $scope.id ).

Answer 2

更好的方法是将您的控制器与 $routeParams 分离。要实现这一点，请使用 $routeProvider 的 resolve 功能：

$routeProvider.
    when("/drivers/:id", {
        templateUrl: "partials/driver.html",
        controller: "driverController",
        resolve: {
            'id': function($route) {
                return $route.current.params.id);
            }
        }
    })

使用上面的方法，Angular 将使 id 可用于您的控制器：

controller('driverController', function($scope, id, F1APIservice)

由于 resolve 是 promise 感知的，另一种方法甚至可以是在 resolve 中进行服务调用：

$routeProvider.
    when("/drivers/:id", {
        templateUrl: "partials/driver.html",
        controller: "driverController",
        resolve: {
            'driver': function($route, F1APIservice) {
                return F1APIservice.getDriverDetails($route.current.params.id);
            }
            'races': function($route, F1APIservice) {
                return F1APIservice.getDriverRaces($route.current.params.id);
            }
        }
    })

driver 和 races 被注入到您的控制器中：

controller('driverController', function($scope, driver, races, F1APIservice)

AngularJS: 如何通过控制器中的服务方法传递id

AngularJS: How to pass the id through a service method in the controller

javascript

controllers

angularjs