298

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

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

4

7 に答える 7

284

ngCloakディレクティブを探していると思います： https ：//docs.angularjs.org/api/ng/directive/ngCloak

ドキュメントから：

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

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

于 2012-10-12T20:38:23.033 に答える
200

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

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

于 2012-10-12T20:49:19.220 に答える
51

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

.ng-cloak { display:none; }
于 2013-07-28T08:30:59.710 に答える
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ルールをページの先頭に追加します。

于 2014-06-06T04:40:50.227 に答える
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>

それでおしまい！

于 2015-02-05T05:12:26.857 に答える
6

ng-attr-src="{{variable}}"の代わりに使用することもできますsrc="{{variable}}"。属性は、コンパイラがテンプレートをコンパイルした後にのみ生成されます。これは、ドキュメントでここに記載されています：https ://docs.angularjs.org/guide/directive#-ngattr-attribute-bindings

于 2015-11-07T19:24:55.653 に答える
3

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

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

と

<li ng-repeat="item in items" ng-cloak>{{item.name}}<li>
于 2016-12-27T10:54:06.843 に答える