ngCloak

http://docs.angularjs.org/api/ng.directive:ngCloak

ngCloakディレクティブは、アプリケーション読み込み時にAngularのHTMLテンプレートの未コンパイルの生の状態が、瞬間的にブラウザに表示されてしまうのを防ぐのに使用されます。

概要
使用方法
デモ

概要

このディレクティブは、HTMLテンプレート表示によって引き起こされる画面のチラつきを避けるために使用します。

このディレクティブは<body>要素に適用できますが、ページ上の各部分に適用することで、ブラウザ表示のレンダリングが段階を追って進めることが可能になるため、この方法が好ましいです。

ngCloakは、angular.jsまたはangular.min.js内に埋め込まれたCSSルールに沿って、協同で動作します。

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

ブラウザによって、このCSSルールが読み込まれた際に、ngCloakとしてタグ付けされた全てのHTML要素(その子要素を含む)は非表示にされます。 Angularはテンプレートのコンパイル中にこのディレクティブを見つけると、ngCloak属性を削除し、コンパイルされた要素が表示されるようにします。

最良の方法は、angular.jsがHTMLドキュメントのhead内で読み込まれ、前述したCSSルールは代わりにアプリケーションの外部CSSとして読み込まれることです。

IE7のような古いブラウザでは、属性セレクタ(CSS2.1追加)のサポートが提供されないため、 [ng\:cloak]セレクタに一致させることが出来ません。この問題を回避するために、下記の例のようにngCloakディレクティブの指定に加え、 ngCloak用のCSSクラスを追加する必要があります。

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
  </head>
  <body>
    <div id="template1" ng-cloak>{{ 'hello' }}</div>
    <div id="template2" ng-cloak class="ng-cloak">{{ 'hello IE7' }}</div>
  </body>
</html>

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();
});

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
  </head>
  <body>
    <div id="template1" ng-cloak>{{ 'hello' }}</div>
    <div id="template2" ng-cloak class="ng-cloak">{{ 'hello IE7' }}</div>
  </body>
</html>

このページは、ページトップのリンク先のAngularJS公式ドキュメント内のページを翻訳した内容を基に構成されています。下記の項目を確認し、必要に応じて公式のドキュメントをご確認ください。もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

AngularJSの更新頻度が高いため、元のコンテンツと比べてドキュメントの情報が古くなっている可能性があります。
"訳注:"などの断わりを入れた上で、日本人向けの情報やより分かり易くするための追記を行っている事があります。