CODEWITHSUNDEEP
javascriptjqueryhtmlcssangularjs
Complexity
Complexity

Reputation: 5820

Hiding elements until load has been completed (ng-cloak isn't what I needed)

I'm writing an AngularJS application, but I'm quite new to it, so in the code below, please point out any issues that you have.

I do have my AngularJS application defines like that:

var OfficeUIModule = angular.module('OfficeUI', ['ngSanitize']);

Then, I do have a couple of services that loads data from various JSon files. But i won't post the code here, because I do believe that irrelevant.

Then I do have my controller which basically looks like this:

OfficeUIModule.controller('OfficeUIController', function($scope) { });

Now, I want the controller to execute some logic on startup and show a DIV element on it. Here's the case what I want to do:

Let's say that in my controller I do have method to initialize the application:

OfficeUIModule.controller('OfficeUIController', function($scope) {
    function Init() { 
        // I'll load all the data from the services here.
    }
});

In order to call this method on startup, I just define it in my controller like so:

OfficeUIModule.controller('OfficeUIController', function($scope) {
    Init();     

    function Init() { 
        // I'll load all the data from the services here.
    }
});

And the HTML which I would like to use is the following:

<body>
    <div id="loading">LOADING</div>
    <div id="displaying">DISPLAYING</div>
</body>

When the page is initially loaded, I would like to show the element 'Loading'. When the page has been loaded, I would like to show the element 'Displaying'.

In order to make this testable, I've changed my controller method Init to include a timeout of 5 seconds, just like below:

OfficeUIModule.controller('OfficeUIController', function($scope) {
    Init();     

    function Init() { 
        setTimeout(function() {
            alert('Page has been loaded. When you click OK the displaying  DIV should be showed.');
        }, 5000);
    }
});

So, in this particular case, I would like to make sure that the page is being loaded, displaying the LOADING div and after 5 seconds, display the DISPLAYING div.

I would also like not to see any flickering, and therefore ng-cloak can be used I've read, but I can't manage to configure it correctly.

Here's what I've tried already:

LOADING DISPLAYING

However, that setup doesn't work quite well.

I've included a Plunker so that you can test the solution you provide.

Upvotes: 1

Views: 633

Answers (2)

Muhammad Reda
Muhammad Reda

Reputation: 27033

You can use the angular version of window load event.

angular.element($window).bind('load', function(e) {
    // code to execute
});

Upvotes: 0

maurycy
maurycy

Reputation: 8465

It happens because you are using setTimeout with anonymous function and angularjs isn't aware of model change

http://plnkr.co/edit/FJ2lnrmtG7P3HXZuxRkH?p=preview

if you use angularjs $timeout it works

$timeout(function() {
  $scope.initialized = true;
}, 5000);

you could also use $scope.$digest() or $scope.$apply to make it work

Upvotes: 3

Related Questions