Resolve data in child state, but its query depends on a resolved object in the parent state.

[michaelhunziker]

Dear all!

I'm having some issues with loading data in a child state. The problem is, that i need to resolve data in my child state which depends on an attribute of an object which was resolved in its parent state. So the hard coded objecttype parameter "APP" below is actually an attribute of an object which was loaded into scope by the parent state. Unfortunately I can't access the object in the parent scope using the following code: $scope.objectType....

$stateProvider
    .state('configurationsWizard.components', {
        url: '/components',
        templateUrl: 'src/app/configurationsWizard/serviceComponents/components.tpl.html',
        controller: 'ServiceComponentsController',
        resolve: {serviceComponents: function ($stateParams, ServiceComponents, $q) {

            var deferred = $q.defer();
            ServiceComponents.query({language:'de',objecttype:'APP'},
                function (response) {
                    deferred.resolve(response);
                }
            );
            return deferred.promise;

        }
        }
    })

How could I solve this problem? I must have missed something because I think it is a common problem to query detail data which depends on master data. Right??

Cheers and thank you in advance!
Michael

[ksperling]

Sounds like #73?

[michaelhunziker]

Hi Karsten!

You're right! A fix for #73 would also resolve my problem.
Just to be curious: Have you already thought about fixing the issue?

I'm currently struggling with a workaround for my problem. I'm sure you can help me on this one:
The only solution I came up with was to load the whole bunch of data consecutively within the parent state's resolve function.

The problem I have is that i somehow need to return a promise (as the state should not be displayed until everything is loaded). But I don't know how...

controller: 'myCtrl',
resolve: {
    applicationData: ['$stateParams', '$http', '$q', function ($stateParams, $http, $q) {

        var applicationData = [];

        $http({method: 'GET', url: 'rest/parent/' + $stateParams.parentId}).
            then(function (response) {
                console.log("Parent data loaded");
                applicationData["parentData"] = response.data;

                // Load dependent data with an attribute of parent
                $http({method: 'GET', url: 'rest/dependentData/' + response.data.parentId}).
                    then(function (response) {
                        console.log("Dependent data loaded");
                        applicationData["dependentData"] = response.data;
                    }
                )
            }
        );

        // TODO: This return is obviously wrong, it should be a promise... but how do I do this??
        return applicationData;
    }
    ]
}

Then in my Controller i could access the data like this:

.controller('myCtrl', ['$scope', 'applicationData', function ($scope, applicationData) {
   console.log(applicationData["parentData"]);
   console.log(applicationData["dependentData"]);
}

[timkindberg]

Do you want to wait until both main and dep are fully loaded, or just main?

[michaelhunziker]

I want to wait for both (parentData and dependentData) to be fully loaded.

[timkindberg]

Pretty sure this is the code...

controller: 'myCtrl',
resolve: {
    applicationData: ['$stateParams', '$http', '$q', function ($stateParams, $http, $q) {

        var def = $q.defer();
        var applicationData = {};       

        $http({method: 'GET', url: 'rest/parent/' + $stateParams.parentId}).
            then(function (response) {
                console.log("Parent data loaded");
                applicationData["parentData"] = response.data;

                // Load dependent data with an attribute of parent
                $http({method: 'GET', url: 'rest/dependentData/' + response.data.parentId}).
                    then(function (response) {
                        console.log("Dependent data loaded");
                        applicationData["dependentData"] = response.data;
                        def.resolve(applicationData);
                    }
                )
            }
        );

        // Return the parentData promise
        return def.promise;
    }
    ]
}

.controller('myCtrl', ['$scope', 'applicationData', function ($scope, applicationData) {
   console.log(applicationData["parentData"]);
   console.log(applicationData["dependentData"]);
}

[michaelhunziker]

Works like a charm!

Thanks Tim!

[timkindberg]

Cool!