CODEWITHSUNDEEP
angularjsangular-ui-router
iQ.
iQ.

Reputation: 3953

Angular-UI Router - Resolve not waiting for promise to resolve?

So to summarise I am using angular-ui router resolve function to retrieve state specific data. However it doesn't seem to full wait for the promise to resolve:

state('parent.ChildState', {
                url: '/myUrl?param1&param1',
                templateUrl: 'views/list.view.html',
                controller: 'MyController',
                resolve: {
                    data: resolveData
                }
            }).

    function resolveData($stateParams, Utils) {
        var filters = Utils.getFilters($stateParams);

        DataService.myDataObj = DataService.get(filters, function(result, headers) {
            DataService.myDataObj = result;
        });
        return DataService.myDataObj;

        // Note I have also tried returning directly the DataService.get call however this makes all the below console log statements as undefined (see below for the controller code to know what I mean). So I do the assignment first and then return that.
    }

Now in the controller I had a function that executes on load like so:

    function ExpensesController(DataService) {

        $scope.viewData = DataService;

        initData();

        function initData() {
            // this generally logs a ngResource and shows the full data obj on console
            console.log($scope.viewData.myDataObj);

           // this gets undefined on console
           console.log($scope.viewData.myDataObj.someField1); 

           // this log fine, however why do I need to do promise      
           // resolve? should be resolved already right?
           $scope.viewData.myDataObj.$promise.then(function() {
               console.log($scope.viewData.myDataObj.someField1);
           });

Upvotes: 5

Views: 5674

Answers (2)

levi
levi

Reputation: 22697

As your required data to resolve is async, you need to return a promise and add return statement inside your callback function.

function resolveData($stateParams, Utils) {
    var filters = Utils.getFilters($stateParams);

    return DataService.get(filters, function(result, headers) {
         DataService.myDataObj = result;
         return DataService.myDataObj
    });
}

You can read ui-router resolve docs more about how resolver works and when they should return promise or pure values.

Upvotes: 5

Vishal
Vishal

Reputation: 124

I don;t know if I have got your problem :), but here is what I feel is wrong

1) in the resolve return a promise, it should not be resolved

function resolveData($stateParams, Utils) {
    var filters = Utils.getFilters($stateParams);
    return DataService.get(filters);       
 }

2) In the controller you should inject the data that is declared in resolve not the DataService so your controller should be

function ExpensesController(data) {
        $scope.viewData = data;
}

Upvotes: 1

Related Questions