CODEWITHSUNDEEP
javascriptangularjs
JanVerbeke
JanVerbeke

Reputation: 30

AngularJS ui-router resolve does not return custom value

When trying to resolve some data before moving to my page, I force resolve a promise, convert it to a custom object and I try to return the custom object to my resolve object.

            .state("trip.detail", {
                url: '/:tripId',
                templateUrl: 'partials/trip/detail.html',
                controller: 'TripDetailController',
                resolve: {
                    trainData: function (TripService, $stateParams, $q) {
                        return TripService.getTripById($stateParams.tripId,function (data) {
                            console.log("received: " + data);
                            return {
                                "relativeTrainId": data.trainId,
                                "from": new Date(data.departure).toISOString(),
                                "to": new Date(data.arrival).toISOString(),
                                "projectId": data.projectId,
                                "isTrip": true,
                                "tripId": data.id,
                                "trajectory": data.trajectory,
                                "statistics": data.statistics
                            }
                        }).$promise;
                    }
                }
            });

This all works, except the 'trainData' that is being injected into my controller is actualy the value 'data' and not custom one that I create.

What's going on?

Extra info about TripService:

services.factory('TripService', function ($resource) {

function TripService() {
    this.tripResource = $resource('rest/trip/:tripId');
}


TripService.prototype.getTrips = function (start, end, project, trainIds, callback) {
    return this.tripsResource.query({
        projectId: project,
        trainIds: trainIds,
        from: start,
        to: end
    }, callback)
}

TripService.prototype.getTripById = function (tripId, callback) {
    return this.tripResource.get({
        tripId: tripId
    }, callback);
}

return new TripService();

});

Upvotes: 2

Views: 75

Answers (2)

alfrescian
alfrescian

Reputation: 4079

you have to create your own promise and resolve it with your custom object:

        .state("trip.detail", {
            url: '/:tripId',
            templateUrl: 'partials/trip/detail.html',
            controller: 'TripDetailController',
            resolve: {
                trainData: function (TripService, $stateParams, $q) {
                    var deferred = $q.defer();
                    TripService.getTripById($stateParams.tripId,function (data) {
                        console.log("received: " + data);
                        deferred.resolve({
                            "relativeTrainId": data.trainId,
                            "from": new Date(data.departure).toISOString(),
                            "to": new Date(data.arrival).toISOString(),
                            "projectId": data.projectId,
                            "isTrip": true,
                            "tripId": data.id,
                            "trajectory": data.trajectory,
                            "statistics": data.statistics
                        });
                    });
                    return deferred.promise;
                }
            }
        });

Upvotes: 1

JanVerbeke
JanVerbeke

Reputation: 30

@alfrescian

You were almost correct. I changed deferred.$promise to deferred.promise

Thanks

Upvotes: 0

Related Questions