Delay the page unload until the model bind

Question

I have a look up service which connects with the API service to bind the dropdown lists.

    var Lookup = angular.module('Lookup', [])
                        .run(function ($window, $rootScope, DropDownLookUp) {

                            debugger;

                            $rootScope.MaritalStatusList = DropDownLookUp.maritalStatusList();

                            $rootScope.ProvinceList = DropDownLookUp.provinceList();

                            $rootScope.GenderList = DropDownLookUp.genderList();

                            $rootScope.ProvinceOfEmploymentList = DropDownLookUp.provinceOfEmploymentList();
                        });

I am using $Http.Get method to fetch the data.

var maritalStatusList = function () {
    var keyName = "dropdown-maritalstatus-list";
    // debugger;
    var data = StoreData.retrieveStaticData(keyName);
    if (data == null) {
        HttpService.Get(config.apiUrl + "HomeAPI/MaritalStatusLookUp", "maritalStatusList", "maritalStatusList").then(function (results) {
            StoreData.saveStaticData(JSON.stringify(results), keyName);
            data = results;
            return data;
        });
    }
    else {
        return data;
    }
};

This look up module is being called when my default App module loads.

Service is getting fired correctly. But my page is getting loaded before the above calls completed. Hence no data displayed in the dropdown.

How do I can delay the page load, until I have all the necessary data?

i am waiting for similar answer but didnt get answer http://stackoverflow.com/questions/17457005/how-to-wait-for-dependent-modules-run-function-to-be-completed-before-initilizat — Ajay Beniwal, Jul 11 '13 at 17:04
Depending on how your async calls are structured, maybe instead of using a `return` you'd want to use a callback — Justen, Jul 11 '13 at 17:41
It shouldn't matter that the page loads before the data is there, since you have bindings to the data in the controller's model it should update as soon as it's available. http://www.youtube.com/watch?v=ZhfUv0spHCY&t=10m0s straight from the horse's mouth. Perhaps your problem is that you're not updating the controller based on a service... you can return a promise from the service... Clark Pan another SO user has a good post on it recently I'll see if I can find it. — shaunhusain, Jul 11 '13 at 17:57
The Q/A part of this isn't the same but the code contains a service that returns the promise so you can within the controller set it up to handle the result after the service call returns. http://stackoverflow.com/questions/17560287/preserving-scope-accross-routed-views/17560774?noredirect=1#comment25547699_17560774 — shaunhusain, Jul 11 '13 at 18:04
Look into [$timeout](http://docs.angularjs.org/api/ng.$timeout). Timeout your system until the data arrives.. or lazy load it. — hunt, Jul 11 '13 at 18:10

score 0 · Answer 1 · edited May 23 '17 at 12:11

Easy method - Use $routeProvider resolve method. - Delays navigation to a page until all promises are fulfilled

Other method - Don't render dom elements or secondary apps:

. The gist of the answer below is to simply wrap any necessary dom elements in an ng-if, and set the evaluated expression to true within the success callback of your $http request. The example below is a bit overkill, in that it's using 2 apps on the page.

This is probably an ugly no-no solution, but it does work. In essence, I'm creating multiple apps on the page (which requires manual bootstrapping). The second app has a dependency on the first, and is rendered within the fake "success callback" of the first app's fake $http via ng-if.

Notice there is no ng-app reference, because the app is manually bootstrapped using the element's id:

<section ng-if="loaded" id="myapp" ng-controller="MyNameIsController">
    My Name is {{FirstName}} {{LastName}}! {{loaded}}
</section>

I'm simulating an $http request with a $timeout in the first app:

 HelloWorldApp.run(function($rootScope, $timeout){
     $timeout(function(){
         $rootScope.loaded = true;
     },1500)
 })

Here's the plunker I forked to get it going.

Delay the page unload until the model bind

1 Answers1