angular.jsがドキュメントをコンパイル/補間する前に二重中括弧表記が一時的に表示されないようにします

298

ロードする画像/スクリプトの数が多い場合、IEの主な問題のようです。{{stringExpression}}マークアップ内のリテラルが表示され、角度のコンパイル/補間が完了すると消えるかなりの時間がある可能性があります。ドキュメント。

これが発生する一般的な理由はありますか？これは、一般的に何か間違っていることを示していますか？これを防ぐ既知の方法はありますか？

angularjs 
— ジェレミーウィアー
ソース
6
— Ismael
上記は適切な解決策でした
— Edmund Rojas

回答:

283

私はあなたがngCloakディレクティブを探していると思います：https : //docs.angularjs.org/api/ng/directive/ngCloak

ドキュメントから：

ngCloakディレクティブは、アプリケーションの読み込み中に、Angular htmlテンプレートがブラウザーによって未加工（コンパイルされていない）フォームで一時的に表示されないようにするために使用されます。このディレクティブを使用して、htmlテンプレートの表示によって引き起こされる望ましくないフリッカー効果を回避します。

ディレクティブは<body>要素に適用できますが、推奨される使用法はngCloak 、ページの小さな部分に複数のディレクティブを適用して、ブラウザービューのプログレッシブレンダリングを許可することです。

— pkozlowski.opensource
ソース
1
生のAngular HTMLコードを回避するために、ngCloak広く普及している/ベストプラクティスはありますか？簡単なことのようですが、AngularJSの経験はありません。
— ケビンメレディス2014年
32
本文の最後ですべてのスクリプトをロードする場合、これは機能しないと思います。
— trusktr 2014
8
ああ、待って、nvm、スクリプトを最後にロードする場合、LOASの答えはソリューションです。.ng-cloakクラスを使用します。
— trusktr 2014年
3
有効にする<head>ためngCloakに、html のセクションでangularjsスクリプトをロードします。
— Mustafa
1
ページのセクションにロードangular.jsすると、完全に機能することを確認でき<head>ます。
— Aron Lorincz
197

また、の<span ng-bind="hello"></span>代わりに使用することもできます{{hello}}。

http://jsfiddle.net/4LhN9/34/

— アンドリュージョスリン
ソース
94
ng-bindについて見過ごされがちな機能の1つは、Angularの読み込み中に表示するテキストを指定できることです：<span ng-bind = "myScopeProperty"> loading ... </ span>。「loading ...」が表示され、myScopePropertyが定義されると置き換えられます。
— Mark Rajcok、2012年
@MarkRajcok：ヒントをありがとう！私は今まで知らなかった。これは非常にシンプルでエレガントで、私自身が抱えていた問題を解決します。
— ジムレイデン
9
複数の式が必要な場合は、ngBindTemplateを使用します。例：<span ng-bind-template = "{{scopeProperty1}} {{scopeProperty2}}"> loading ... </ span>
— Mark Rajcok、
27
{{hello || 'loading ...'}}
— Andrew Joslin
5
@AndyJoslinニース。この方法では、ページの読み込み時に{{}}式が点滅しないように、ページの下部ではなく、角のjsスクリプトを先頭に置く必要があります。
— s_t_e_v_e 2013
51

スクリプトが最後に読み込まれるときのclass = 'ng-cloak'アプローチの効果を向上させるには、次のcssがドキュメントの先頭に読み込まれていることを確認してください：

.ng-cloak { display:none; }
— LOAS
ソース
4
！importantを追加することも悪い考えではありません。
— eomeroff 2013
12
visibility: hidden良いと思いませんか？
— mpen
2
@eomeroffですが、スタイルを選択するための!importantCSS ハック（悪いこと）ですよね？CSSセレクター規則に違反します。
— ケビンメレディス2014年
5
IMHOこれは重要なケースの1つです。
— lex82 2014
3
@Mark「visibility：hidden」はテンプレートマークアップに必要なスペースをレンダリングしますが、「display：none」は何もレンダリングしません。可視性のみを非表示にすると、外側の要素は、何もない状態からサイズに拡大するのではなく、真の内部サイズに突然縮小する可能性があります。私はそれが好きなものだと思います。:)
— James Wilkins
40

クローキングCSSをページのヘッドまたはCSSファイルの1つに追加するだけです。

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

次に、通常のAngularの慣習に従ってngCloakディレクティブを使用できます。これは、Angular自体がロードされる前でも機能します。

これがまさにAngularの機能です。angular.jsの最後のコードは、上記のCSSルールをページの先頭に追加します。

— ベネット・マケルウィー
ソース
+1 [ngcloak]セレクターを自分で考えましたが、これはより完全です。
— Pierre Henry 14
1
素晴らしい答えです！Angularを体の最後にロードしているため、ngCloakは利用できず、まだ{{}}が点滅しています。これはそれを修正しました。
— スコッティ2014
21

あなたのCSSに以下を追加してください

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

そして、コードにng-cloakディレクティブを追加できます。例えば、

<div ng-cloak>
   Welcome {{data.name}}
</div>

それでおしまい！

— ネイサン・セネビラトネス
ソース
3

@ pkozlowski.opensourceの回答に同意しますが、ng-clockクラスがng-repeatで使用するために機能しませんでした。したがって、{{name}}のような単純な区切り文字式にはクラスを使用し、ng-repeatにはngCloakディレクティブを使用することをお勧めします。

<div class="ng-cloak">{{name}}<div>

そして 

<li ng-repeat="item in items" ng-cloak>{{item.name}}<li>
— ジェイソン
ソース
間違いに気付いてくれてありがとう
— ジェイソン2017
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.