AngularJSでng-cloakを使用してもフッタテンプレートが点滅する

AngularJSを使用してRESTサービスから取得されたデータを含むテンプレートを作成して表示するのに成功ですが、JSONレスポンスがまだ読み込まれているときは、レスポンスがJSONデータを返すと、フッターは一番下に移動します。AngularJSでng-cloakを使用してもフッタテンプレートが点滅する

これは非常に迅速に発生しますが、ページの上部にフッターテンプレートが点滅してから下部に移動します。

ng-cloakアプローチを使用しようとしましたが、残念ながら問題はまだ発生しています。私はAPI Referenceを推奨しているので、CSSをng-cloakに入れました。ここで

は私のアプリのコードです：

<body> 
    <div data-ng-controller="HeaderCtrl" data-ng-include="'app/partials/header.html'"></div> 
    <div data-ng-controller="MenuCtrl" data-ng-include="'app/partials/lista-menu.html'"></div> 
    <div ng-view="main" ></div> 
    <footer class="nav" data-ng-include="'app/partials/footer.html'" ></footer>

私はbodyタグ、NG-ビュー、フッター、およびまたNGビューHTMLテンプレート内側にNG-マントをつけてみてください。読み込みが完了する前に

<body ng-cloak class="ng-cloak"> 
    <div data-ng-controller="HeaderCtrl" data-ng-include="'app/partials/header.html'"></div> 
    <div data-ng-controller="MenuCtrl" data-ng-include="'app/partials/lista-menu.html'"></div> 
    <div ng-view="main" ng-cloak class="ng-cloak"></div> 
    <footer class="nav" data-ng-include="'app/partials/footer.html'" ng-cloak class="ng-cloak"></footer>

残念ながら、すべてのこれらの変更後、フッターテンプレートは、まだ上に点滅：このコードは、すべての試みは、（私はNG-マントクラスではなく、別途と一緒に使用してみました注意してください）を表し。

誰でもこの問題を解決できますか？

メイン区画に高さがない場合でも、フッターを底に置くためのブートストラップのトリックはありますか？私はnav-fixed-bottomタグを使用しようとしましたが、ページの高さの値が高い場合、画面上に下を固定したくありません。

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

出典

2013-02-17 Deividi Cavarzan

NG-マントおよび/またはng-bindをこの問題を解決することはできません、ので、これは "コンパイルされていないコンテンツのフラッシュ"問題ではありません。これらのディレクティブは、AngularがHTMLをコンパイルするまでコンテンツを隠すためのものです。

あなたが解決しようとしている問題は、「私はページに動的なものを追加しており、物事は動き回っています。メインのコンテンツが読み込まれた後でのみフッターを表示したい場合は、彼のコメントに@Alexソリューションが好きです。

出典

2013-02-19 15:44:27

私は同じことを試みましたが、それでもfirefoxのリロードで点滅します... – Sikander

ng-cloakルールと競合する可能性のあるCSSルールがあるかどうかを再度確認しましたか？これは他のスタイル、ライブラリなどでも起こる可能性があります。

競合するルールがある場合は、display:none;を追加するだけでは不十分な場合があります。

このような場合は、解決策を使用することですAngularjs - ng-cloak/ng-show elements blink

を参照してください。この克服することが重要！：

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

出典

2013-02-18 03:13:32

あなたの助けを借りてくれてありがとう。あなたのリファレンスを読んで、私のCSSに！importantタグを入れようとすると、すでにそこにあります！私は、2つの分離されたテンプレートがあるので、フッターテンプレートは最初のものの前にレンダリングすると考えています。私はアプリを非同期で実行しようとしましたが、問題は解決しません。この時点で私が見つけた唯一の解決策は、フッタの内容を主な視点の中に置くことですが、このコードをすべてのページに配置する必要があるため、これはベストプラクティスではないかもしれません。 –

はい、意味があります。 ng-cloakの代わりにng-cloakの代わりに、主なコンテンツの読み込み/要求が完了したときにのみ設定するスコープ変数にng-showを追加する方法があります。その場合、フッターが表示されるときに手動で設定します。 –

この問題の最適な解決策はこのコメントです。答えを@AlexOsbornに組み込むことができますか？ – markus

アレックスとマークが言ったように、ng-cloakはこの場合に何の利益ももたらしません。しかし私は私のために働く何かを使用し、また他人を助けるかもしれません。

最初は、フッターは表示されません。

.footer { 
    display: none; 
}

コンテンツをロードしてAngularを実行すると、フッターが表示されます。

var app = angular.module('app', [...]) 
.run(function($rootScope) { 
    $rootScope.$on('$viewContentLoaded', function(event){ 
     $('.footer').fadeIn(500); 
    }); 
});

出典

2015-03-24 14:46:03

AngularJSでng-cloakを使用してもフッタテンプレートが点滅する

答えて

関連する問題