0

AngularJS アプリがあります (SPA ではありません)。コンパイルされていないテンプレートの一部が一瞬だけ表示されるというこの問題に直面しているため、アプリに ngCloak ディレクティブを適用しています。

このディレクティブを正確にどこで使用する必要があるのか​​ わかりません-すべての単一の小さな要素または大きなセクション（または他の場所）。私が現在行っているのは、Chrome 開発ツールを介した接続を非常に遅い速度に調整し、テンプレートのどの部分が生の状態で表示されるかを確認することです。しかし、これは非常に決定論的なアプローチではないと感じています。

ですから、ngCloak を使用する場所を正確に知りたいのです。

ありがとうございました。

4

3 に答える 3

2

すべての小さな要素に ngCloak を適用することは、確かに間違った方法です。

通常は、大きなセクション、または Angular を使用するページ全体に適用する必要があります。目的は、Angular を使用する準備が整うまで、ページのこれらの部分を非表示にすることです。

これは、公式ドキュメントが言うことです：

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

ユーザーに空白を見せたくない場合は、Angular の読み込みが完了するまで読み込みアニメーションを表示できます。ng-show="false"要素にディレクティブを与えることでこれを行うことができます:

<img src='/images/loading.gif' ng-show='false' />
于 2015-12-21T12:44:39.663 に答える
1

次のコードを index.html の head セクションに追加してください

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

そして、同じコードをcssファイルに追加できます

ありがとう

于 2015-12-21T12:44:38.353 に答える