html element inside ng-if appear when the page is loading

Question

On my page I have a div inside ng-if when there is a number of scripts to load ,i.e when the page is not fully loaded.The div is visible. How do I hide it unless page/angular is fully loaded.

<div  id = "menu"  ng-if="someCondition" >
    <ul class="user-menu">
        <li>
            menu item 1 
        </li>
        <li>
            menu item 2 
        </li>
    </ul>
</div>

Answer 1

Take a look at the documentation for ng-cloak.

From the documentation:

The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.

Also:

The directive can be applied to the element, but the preferred usage is to apply multiple ngCloak directives to small portions of the page to permit progressive rendering of the browser view.

<div  id = "menu"  ng-if="someCondition" ng-cloak>
    <ul class="user-menu">
        <li>
            menu item 1 
        </li>
        <li>
            menu item 2 
        </li>
     </ul>
 </div>

How it works:

The following styles are applied to the document (the angular.js file is essentially acting as a .css file) when angular.js is loaded (which is recommended to be in the head of your page). When angular actually runs on DOM load, it removes the ng-cloak attribute, uncloaking the elements.

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

If you don't load angular in the head of your document, then you can add the styles manually to the head and everything will still work. Just add

<style type="text/css">
    [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
        display: none !important;
    }
</style>

Answer 2

This is a guess due to the fact that you only provided a small code snippet but my guess is that the controller is not initialized yet ( under the hood angular will parse through your HTML DOM and act accordingly when it is called. )

If you use a simple route this would prevent this completely.

Alternatively you could place all of your ng-if conditions with a css display:none; and then iterate through all of them once the app has completed loading