231

angular.js でディレクティブ/クラスng-cloakまたはng-show.

ng-cloakChrome は正常に動作しますが、Firefox では、またはで要素が点滅しng-showます。私見は、ng-cloak/ng-showへの変換が原因である可能style="display: none;"性があります。おそらく Firefox の JavaScript コンパイラが少し遅いため、要素がしばらく表示されてから非表示になりますか?

例：

<ul ng-show="foo != null" ng-cloak>..</ul>
4

29 に答える 29

387

ドキュメントには記載されていませんがdisplay: none;、CSS にルールを追加するだけでは不十分な場合があります。本文に angular.js をロードしている場合、またはテンプレートがすぐにコンパイルされない場合は、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>

たまたま使用している場合、次のセレクターは'ed 要素bootstrap.cssにより具体的ですng-cloak

.nav > li > a {
  display: block;
}

したがって、単に を含むルールを含めるとdisplay: none;、Bootstrap のルールが優先され、displayが に設定されるblockため、テンプレートがコンパイルされる前にちらつきが表示されます。

于 2012-11-07T18:52:00.643 に答える
47

ドキュメント に記載されているように、ng-cloak属性に基づいて CSS を非表示にするルールを CSS に追加する必要があります。

[ng\:cloak], [ng-cloak], .ng-cloak {
    display: none;
}

Github でソースを表示できる「Built with Angular」サイトでも同様のトリックを使用しています: https://github.com/angular/builtwith.angularjs.org

それが役立つことを願っています!

于 2012-06-29T08:59:34.160 に答える
33

headHTMLの に AngularJS が含まれていることを確認します。ngCloak ドキュメントを参照してください:

最良の結果を得るには、angular.js スクリプトを html ファイルの head セクションにロードする必要があります。または、css ルール (上記) をアプリケーションの外部スタイルシートに含める必要があります。

于 2013-03-01T20:59:09.837 に答える
27

私は ngCloak を使ってうまくいったことはありません。上記のすべてにもかかわらず、まだちらつきます。フリックを回避する唯一の確実な方法は、コンテンツをテンプレートに入れてテンプレートを含めることです。SPA では、Angular によってコンパイルされる前に評価される唯一の HTML は、メインの index.html ページです。

本体内のすべてを取得し、別のファイルに貼り付けてから、次のようにします。

<ng-include src="'views/indexMain.html'"></ng-include>

Angular はテンプレートを DOM に追加する前にコンパイルするため、ちらつきが発生することはありません。

于 2013-10-10T16:47:20.273 に答える
22

ngBindとngBindTemplateは、CSSを必要としない代替手段です。

<div ng-show="foo != null" ng-cloak>{{name}}</div>  <!-- requires CSS -->
<div ng-show="foo != null" ng-bind="name"></div>
<div ng-show="foo != null" ng-bind-template="name = {{name}}"></div>
于 2012-11-07T20:21:01.137 に答える
20

ng-cloakをトリガーする別の方法を使用している場合は、受け入れられた回答に加えて...

また、CSS/LESS にいくつかの追加の特異性を追加することもできます。

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak],
.ng-cloak, .x-ng-cloak,
.ng-hide {
    display: none !important;
}
于 2014-01-10T02:00:48.633 に答える
15

同様の問題があり、トランジションを含むクラスがある場合、要素が点滅することがわかりました。成功せずに ng-cloak を追加しようとしましたが、トランジションを削除すると、ボタンの点滅が止まりました。

私はイオンフレームワークを使用しており、ボタンのアウトラインにはこの遷移があります

.button-outline {
  -webkit-transition: opacity .1s;
  transition: opacity .1s;
}

クラスを上書きしてトランジションを削除するだけで、ボタンの点滅が止まります。

アップデート

イオンでは、ng-show/ng-hide を使用するとちらつきが発生します。次の CSS を追加すると解決します。

.ng-hide-add,
.ng-hide-remove {
  display: none !important;
}

ソース: http://forum.ionicframework.com/t/beta-14-ng-hide-show/14270/9

于 2015-04-29T12:27:58.353 に答える
3

これらの方法のいずれも機能させることができなかったので、最終的に次のことを行いました。最初に非表示にする要素の場合:

<div <!--...--> style="display: none;" ng-style="style">

次に、コントローラーで、これを上部またはその近くに追加します。

$scope.style = { display: 'block' };

このようにして、要素は最初は非表示になり、コントローラー コードが実際に実行されたときにのみ表示されます。

おそらくいくつかのロジックを追加して、必要に応じて配置を調整できます。私の場合、現在ログインしていない場合はログインパスに切り替え、事前にインターフェイスがちらつきたくなかったので$scope.style、ログインチェックの後に設定しました。

于 2016-07-06T04:28:42.760 に答える
3

以下のステートメントをヘッドタグに保持すると、この問題が修正されました

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

公式文書

于 2015-07-19T12:27:04.603 に答える
2

バージョン[1.4.9]が以下に更新され、data-ng-cloakディレクティブをサポートできるようになるため、角度ドキュメントを参照することをお勧めします。

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}
于 2016-03-25T11:07:13.470 に答える
2

上記の ng-cloak ソリューションを試しましたが、それでも Firefox で断続的な問題が発生します。私にとってうまくいった唯一の回避策は、Angular が完全に読み込まれるまでフォームの読み込みを遅らせることです。

アプリに ng-init を追加し、フォーム側で ng-if を使用して、設定した変数が既に読み込まれているかどうかを確認するだけです。

<div ng-app="myApp" ng-init="loaded='yes'"> 
   <form ng-if="loaded.length > 0">
      <!--all my elements here-->
   </form>
</div>
于 2016-08-04T20:16:02.667 に答える
1

ここに投稿されたすべての解決策を試しましたが、それでも Firefox がちらつきます。

それが誰かに役立つ場合は、style="display: none;"メインコンテンツのdivに追加して解決$('#main-div-id').show();し、サーバーからデータを取得した後にすべてがロードされたらjQuery（ページですでに使用していました）を使用しました。

于 2015-12-10T15:35:10.583 に答える
1

実際、Rick Strahl の Web Logからの提案で問題が完全に解決されていることがわかりました (特に Firebug の実行中に ng-cloak が raw {{code}} を点滅させるという奇妙な問題がまだあったため):

核オプション: コンテンツを手動で非表示にする

明示的な CSS を使用するのが最善の選択であるため、以下は必要ありません。ただし、他のフレームワークのロード時に、または独自のマークアップ ベースのテンプレートでコンテンツを手動で非表示/表示する方法についての洞察が得られるため、ここで言及します。

CSS スタイルをページに明示的に埋め込むことができると理解する前に、ng-cloak が機能しない理由を突き止めようとしました。どこにも行かずに1時間を無駄にした後、最終的にコンテナを手動で非表示にして表示することにしました。アイデアは単純です。最初はコンテナーを非表示にし、Angular が最初の処理とページからのテンプレート マークアップの削除を完了したら、コンテナーを表示します。

コンテンツを手動で非表示にして、Angular が制御を取得した後に表示することができます。これを行うには、次を使用しました。

<div id="mainContainer" class="mainContainer boxshadow"
    ng-app="app" style="display:none">

ページ上で最初に要素を明示的に非表示にする display: none スタイルに注意してください。

次に、Angular が初期化を実行し、ページ上のテンプレート マークアップを効果的に処理したら、コンテンツを表示できます。Angular の場合、この「準備完了」イベントは app.run() 関数です。

app.run( function ($rootScope, $location, cellService) {        
    $("#mainContainer").show();
    …
});

これにより、display:none スタイルが効果的に削除され、コンテンツが表示されます。app.run() が起動するまでに、DOM は、埋められたデータまたは少なくとも空のデータを表示する準備ができています – Angular が制御を取得します。

于 2016-02-02T05:49:05.570 に答える
1

上記のすべての回答を試しましたが、何も機能しませんでした。ionic を使用してハイブリッド アプリを開発し、エラー メッセージがちらつかないようにしようとしていました。 要素に ng-hide クラスを追加することで、問題を解決しました。 私の div には、エラーが発生したときに要素を表示するための ng-show が既にあります。ng-hide を追加すると、angular が読み込まれる前に div が表示されないように設定されます。ng-cloak やヘッドに角度を追加する必要はありません。

于 2016-06-18T20:29:01.367 に答える
0

私<ul>は<div ng-cloak>

于 2012-06-28T21:58:57.387 に答える
-2

改行を避ける

<meta http-equiv="Content-Security-Policy"              content="
default-src 'FOO';   
script-src 'FOO';    
style-src  'FOO'; 
font-src 'FOO';">

Firefox 45.0.1 で動作

<meta http-equiv="Content-Security-Policy"              content="    default-src 'FOO';    script-src 'FOO';     style-src  'FOO';    font-src 'FOO';">
于 2016-03-30T20:18:49.767 に答える