angular.module.ng.$compileProvider.directive.ng-cloak

Description

The ng-cloak 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.

The directive can be applied to the <body> element, but typically a fine-grained application is prefered in order to benefit from progressive rendering of the browser view.

ng-cloak works in cooperation with a css rule that is embedded within angular.js and angular.min.js files. Following is the css rule:

[ng\:cloak], .ng-cloak {
  display: none;
}

When this css rule is loaded by the browser, all html elements (including their children) that are tagged with the ng-cloak directive are hidden. When Angular comes across this directive during the compilation of the template it deletes the ng-cloak element attribute, which makes the compiled element visible.

For the best result, angular.js script must be loaded in the head section of the html file; alternatively, the css rule (above) must be included in the external stylesheet of the application.

Legacy browsers, like IE7, do not provide attribute selector support (added in CSS 2.1) so they cannot match the [ng\:cloak] selector. To work around this limitation, you must add the css class ng-cloak in addition to ng-cloak directive as shown in the example below.

Usage

as attribute
<ANY ng-cloak>
   ...
</ANY>
as class
<ANY class="ng-cloak">
   ...
</ANY>

Example

   <div id="template1" ng-cloak>{{ 'hello' }}</div>
   <div id="template2" ng-cloak class="ng-cloak">{{ 'hello IE7' }}</div>
  it('should remove the template directive and css class', function() {
    expect(element('.doc-example-live #template1').attr('ng-cloak')).
      not().toBeDefined();
    expect(element('.doc-example-live #template2').attr('ng-cloak')).
      not().toBeDefined();
  });