4

I'd like to hide the angular app until the view is rendered. I propable have to hide it using style="display:none":

 <div id="app-content" style="display:none">
      <!-- Angular app HTML code -->
 </div>

I have tried this, it won't work, because Angular does not modify the style.display value.

<div id="app-content" style="display:none" ng-show="1">

How does Angular hide elements, where should I modify the style.display, or is there a better solution?

Ramesh Rajendran
  • 37,412
  • 45
  • 153
  • 234
Artisan72
  • 3,052
  • 3
  • 23
  • 30
  • you mean to say load view from route or by making ajax? – Pankaj Parkar Apr 29 '15 at 08:55
  • 1
    if any methods mentioned above is not helping, then checkout https://stackoverflow.com/a/44942863/5902146 – shreedhar bhat Jul 06 '17 at 07:54
  • ng-cloak is the answer. we can also use ng-show or ng-hide in combination with ng-cloak. this link has details about ng-cloak https://docs.angularjs.org/api/ng/directive/ngCloak – Topman Nov 15 '17 at 04:53

3 Answers3

4

How does Angular show and hide elements?

This is depends on Boolean (true or false) value

ng-show :

  • ng-show="true" is same as style="display:block"
  • ng-show="false" is same as style="display:none"

ng-hide :

This is same as ng-show by depends on true or false value

  • ng-hide="true" is same as style="display:none"
  • ng-hide="false" is same as style="display:block"

if you use ng-show or ng-hide, then you don't need call the display properties in your style

Where should I modify the style.display, or is there a better solution?

You don't need style.display if you using angular.js. just try with ng-show and ng-hide.

if you use ng-show or hide, then you can do the changes in your controller.

like something below

<div  ng-show="modelName">......

you need to modify the modelName in your controller.

function controllername($scope)
{
$scope.modelName="true"// or false
}
Community
  • 1
  • 1
Ramesh Rajendran
  • 37,412
  • 45
  • 153
  • 234
  • Thank you, but I think I got misunderstood. If I load a page which angular is using, it might take a few seconds until the angular.js is loaded OR the angular.js can't be loaded. The user will see a page with {{ }}'s and elements which should be hidden, are visible, until Angular has rendered the view. An ng-hide/ng-show won't work before the loading and rendering is completed. – Artisan72 Apr 29 '15 at 09:23
  • @Artisan72, use ng-bind instead of `{{}}` if you don't want users see it before angular render or check [ng-cloak](https://docs.angularjs.org/api/ng/directive/ngCloak) – YOU Apr 29 '15 at 11:41
1

Try it.

<div id="app-content" ng-show="false">

or

<div id="app-content" ng-hide="true">

You don't have need to use display:none with angularjs because it provides ng-hide and ng-show directives to do this kind of lots of things.

for more information visit this link Angularjs doc

Dhaval Joshi
  • 54
  • 3
0

You also could use a html attribute directive called ng-cloak and hide elements that have that particular html attribute. ng-cloak removes itselfs at the end of the digest cicle - also after the curly braces were removed. So you do not have to use the ng-bind syntax.

In HTML/CSS:

<style type="text/css">
    [ng-cloak] {
       display:none;
    }
</style>

Then use it like required attribute

<div ng-hide="someVar" ng-cloak="">{{someOtherPerhaps}}</div>
Moses Ramses
  • 61
  • 3