HTML styling while Angular JS is loading

Question

I have html block and I want to control it's visibility by Angular variable

<div class={{visibilityCss}}>
    Show/Hide Area
</div>

In angular I have $scope.visibilityCss = 'hide' or $scope.visibilityCss = 'show' which is 'hide' by default. I also have css for .show/.hide classes to toggle the div visibility with display:block/none.

I want this div to be hidden initially but my problem is that while the page is loading the div is visible and only after ~1 sec (when angular js is loaded) it is hidden by javascript. I would like to make it not visible from the very beginning. (something like applying hidden css for .{{visibilityCss}} class if it was a valid css class name)

cs1193 · Accepted Answer · 2014-09-06 17:33:11Z

4

To get show/hide feature

<div ng-show="show">
   Area
</div>

In controller define

 $scope.show = true //Shows the Area

or

$scope.show = false //Hides the Area

depending on the requirement.

EDIT

I believe this could help, if further clarification is needed post a Plnkr.

NOT TESTED

var app = angular.module('app', []);

app.run(function($rootScope) { 
  $rootScope.show = false;
});

app.controller('Ctrl', function($rootScope,$scope) { 
   $rootScope.show = true 
})

edited Sep 6, 2014 at 17:33

answered Sep 6, 2014 at 17:17

cs1193

1,1092 gold badges17 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

David Spence Over a year ago

Agreed that this is a better approach and is clearer in the html.

jonasnas Over a year ago

Good to know but it doesn't solve the problem for page loading.

Community · Accepted Answer · 2017-05-23 12:06:05Z

2

Okay, first up your HTML code is bad. You should be using ng-class instead:

<div ng-class="visibilityCss">
  Show/Hide Area
</div>

To answer your question, Angular has a built in setup for exactly this feature. By adding the class ng-cloak, and adding the following CSS to your stylesheet, it'll be hidden when the page loads. Angular will then show it once everything is loaded.

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

And then in your HTML:

<div class="ng-cloak" ng-class="visibilityCss">
  Show/Hide Area
</div>

Edit As mentioned by Chandresh, using the ng-show directive with a true/false value would be a better option than using ng-class

edited May 23, 2017 at 12:06

CommunityBot

11 silver badge

answered Sep 6, 2014 at 17:15

Zoey Mertes

3,13422 silver badges23 bronze badges

6 Comments

Ed_ Over a year ago

alternatively you can put your angular script tag in the <head> of the page, then the page won't load at all until angular is already loaded.

Zoey Mertes Over a year ago

@EdHinchliffe That also stifles page loading.

Ed_ Over a year ago

It does indeed, which I eluded to. My angular apps are very little without angular (most of the content is inside a ui-view), so I really don't mind if the page doesn't start to load until angular has - it makes very little difference, and is much easier than messing around with ng-cloak.

jonasnas Over a year ago

I need to apply some dynamic styles as well when it is visible so I think this solution will fit better than combining class with hide/show. Let me try

Ed_ Over a year ago

@jonasnas you need at least this solution, semantically it also makes sense to have ng-class and ng-show on the element, it also decouples your logic from your display a bit more.

|

Collectives™ on Stack Overflow

HTML styling while Angular JS is loading

2 Answers 2

2 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related