[解決済み】Angularjs - ng-cloak/ng-show要素がブリンクする。
2022-04-04 01:14:43
質問
Angular.js のディレクティブ/クラスで問題が発生しました。
ng-cloak
または
ng-show
.
Chrome は問題なく動作しますが、Firefox では
ng-cloak
または
ng-show
.
IMHOでは、この問題は、変換された
ng-cloak
/
ng-show
から
style="display: none;"
というのは、おそらくFirefoxのjavascriptコンパイラが少し遅いので、要素がしばらく表示され、その後隠れるのでは?
例
<ul ng-show="foo != null" ng-cloak>..</ul>
解決方法は?
ドキュメントには記載されていませんが、このような場合は
display: none;
ルールをCSSに追加してください。 angular.jsをbodyで読み込んでいる場合や、テンプレートがすぐにコンパイルされない場合などには
ng-cloak
ディレクティブ
と
をCSSに記述してください。
/*
Allow angular.js to be loaded in body, hiding cloaked elements until
templates compile. The !important is important given that there may be
other selectors that are more specific or come later and might alter display.
*/
[ng\:cloak], [ng-cloak], .ng-cloak {
display: none !important;
}
コメントにもあるように
!important
が重要です。 たとえば、次のようなマークアップがあるとします。
<ul class="nav">
<li><a href="/foo" ng-cloak>{{bar}}</a></li>
</ul>
を使用していて、たまたま
bootstrap.css
の場合、次のセレクタはより具体的です。
ng-cloak
要素
.nav > li > a {
display: block;
}
そのため、単に
display: none;
を指定すると、Bootstrap のルールが優先されます。
display
に設定されます。
block
そのため、テンプレートがコンパイルされる前にフリッカーが表示されます。
関連
-
[解決済み】JavaScriptのinnerHTMLで要素が更新されない
-
[解決済み】Reactのeslintエラーはpropsの検証で見つからない
-
[解決済み] AngularJSでデータバインディングはどのように機能するのですか?
-
[解決済み] JavaScriptで配列の先頭に新しい配列要素を追加するにはどうすればよいですか?
-
[解決済み] 動的に生成された要素にイベントバインディングを行うか?
-
[解決済み] Javascriptで配列から空の要素を削除する
-
[解決済み] AngularJSを使用して、ブラウザのコンソールで$scope変数にアクセスするにはどうすればよいですか?
-
[解決済み] AngularJSで$scope.$watchと$scope.$applyを使用するにはどうすればよいですか?
-
[解決済み] AngularJS コントローラにおける 'this' と $scope の比較
-
[解決済み】AngularJSのスコーププロトタイピング/プロトタイピング継承のニュアンスとは?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Uncaught TypeError: nullのプロパティ'value'を読み取ることができない
-
[解決済み】webpack-dev-serverにリモート接続すると、「Invalid Host header」というメッセージが表示されます。
-
[解決済み] テスト
-
[解決済み】WebpackとBabelで「このファイルタイプを扱うには適切なローダーが必要な場合があります。
-
[解決済み】Javascript - ERR_CONTENT_LENGTH_MISMATCH
-
[解決済み】このオブジェクトの "forEach "はなぜ関数でないのですか?
-
[解決済み】 \u003C とは何ですか?
-
[解決済み】未定義のプロパティ 'forEach' を読み取ることができない
-
[解決済み】Vueが定義されていない
-
[解決済み] AngularJSの部分的なビューに基づいて動的にヘッダーを変更するには?