Angular RouteParams 发送 ID答案

【问题标题】：Angular RouteParams send IDAngular RouteParams 发送 ID
【发布时间】：2023-03-14 02:13:01
【问题描述】：

我试图通过工厂使用 $routeParams 将 ID 发送到控制器，但它不起作用。

我的 $routeProvider：

.when('/event/:eventId', {
    templateUrl : 'pages/event_detail.html',
    controller  : 'eventPageCtrl'
});

我的工厂：

myApp.factory('eventRepo', ['$http', function($http) {

    var urlBase = 'php/api.php';
    var eventRepo = {};

    eventRepo.getEvent = function (id) {
        return $http.get(urlBase + '?eventID=' + id);
    };

    return eventRepo;

}]);

我的控制器：

myApp.controller('eventPageCtrl', ['$scope', '$routeParams', 'eventRepo', 
        function ($scope, $routeParams, eventRepo) {

        $scope.getEvent = function (id) {
            eventRepo.getEvent($routeParams.eventId)
            .success(function (data) {
                $scope.eventsDetail = data;
            })
            .error(function (error) {
                $scope.status = 'Error retrieving event! ' + error.message;
            });
        };  

}]);

在控制器内部而不是工厂处理 $http.get() 时它工作正常，所以我认为我没有正确传递我的 $routeParams？也许这条线导致了问题eventRepo.getEvent($routeParams.eventId)？

目前可行，但尝试在控制器外部使用 $http.get()：

myApp.controller('eventPageCtrl', function($scope, $http, $routeParams) {

      $http.get("php/api.php?eventID="+$routeParams.eventId).success(function(data){
            $scope.eventsDetail = data;
           });
});

【问题讨论】：

您是否尝试在$scope.getEvent 中控制台记录$routeParams.eventId？
什么实际上不起作用？是否通过undefined？什么触发了$scope.getEvent 函数？
您的 api.php 收到 eventID 或 eventId?

标签： javascript angularjs routes ngroute

【解决方案1】：

如何在您的 routeProver 中使用 resolve 并返回 eventId 然后将其注入 controller .. 示例：

$routeProvider:

.when('/event/:eventId', {
        templateUrl : 'pages/event_detail.html',
        controller  : 'eventPageCtrl',
        resolve : {
                    eventId: function($route, $location) {
                        var eventId = $route.current.params.eventId;
                        return eventId;
    });

控制器：

myApp.controller('eventPageCtrl', ['$scope', 'eventId', 'eventRepo', 
        function ($scope, eventId, eventRepo) {   //add it as a dependency

        $scope.eventId = eventId;   //you can check this to see if its being assigned 
        $scope.getEvent = function (eventId) {     //Edit: eventId added here
            eventRepo.getEvent(eventId)            //Edit: eventId passed 
            .success(function (data) {
                $scope.eventsDetail = data;
            })
            .error(function (error) {
                $scope.status = 'Error retrieving event! ' + error.message;
            });
        };  

}]);

【讨论】：