AngularJS：如何通過控制器中的服務方法傳遞id

我正在開發一個AngularJS webapp。我有以下routeconfig：AngularJS：如何通過控制器中的服務方法傳遞id

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

以下方法但現在有就是我堅持的部分。我需要這種方法來爲一個物體分配一個車手和他的比賽。但我需要這個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未知，而我建立我的web應用程序。我做錯了什麼？

來源

2015-08-22 Jonas

在你的控制器，可以分配給$routeParams.id$scope.id，但你打電話getDriverDetails和getDriverRaces只有id，這是不確定的。你需要像這樣稱呼他們：getDriverDetails($scope.id)。

來源

2015-08-22 19:02:17

好的我明白了，我會試試它。 – Jonas

也可以使用'F1APIservice.getDriverDetails（$ routeParams.id）' –

這也是一個選項。如果你不需要'$ scope'中存在的ID，那麼沒有理由從'$ routeParams'中重新分配它。 –

更好的方法是從$routeParams分離您的控制器。爲了實現這一目標使用$routeProvider的resolve功能：

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

使用上面，角會使id提供給您的控制器：

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

由於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)

來源

2015-08-22 19:18:05 Beyers

AngularJS：如何通過控制器中的服務方法傳遞id

回答

相關問題