Fußzeile Vorlage blinkt auch mit ng-Umhang in AngularJS

Ich bin erfolgreich Erstellen und Anzeigen Vorlagen mit einigen Daten aus REST-Service mit AngularJS abgerufen, aber wenn JSON Antwort noch lädt, zeigt der Browser die Fußzeile Vorlage an der Spitze, und Wenn die Antwort die JSON-Daten zurückgibt, geht die Fußzeile nach unten.Fußzeile Vorlage blinkt auch mit ng-Umhang in AngularJS

Dies geschieht sehr schnell, aber die Fußzeilenvorlage blinkt oben auf der Seite, bevor sie nach unten geht.

Ich habe versucht mit dem ng-Umhang Ansatz leider das Problem immer noch passiert. Ich lege das CSS auf ng-cover wie die API Reference empfehlen.

Hier ist mein App-Code:

<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>

ich den ng-Mantel auf Body-Tag setzen versuchen, ng-Ansicht, Footer, und auch innerhalb des ng-Ansicht HTML-Template. Dieser Code stellt alle Versuche (Anmerkung: Ich habe versuchen, einzeln und gemeinsam, mit ng-Mantel-Klasse zu verwenden und nicht)

<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>

Leider nach all diesen Veränderungen noch die Fußzeile Vorlage oben blinken, bevor der Ladevorgang abgeschlossen .

Jeder kann mir helfen, das zu beheben?

Ist ein Bootstrap-Trick, um die Fußzeile auf den Boden zu legen, auch wenn der Hauptteil ohne Höhe ist? Ich habe versucht, das nav-fixed-bottom-Tag zu verwenden, aber ich möchte nicht, dass die Unterseite auf dem Bildschirm fixiert wird, wenn die Seite hohe Höhenwerte hat.

Danke !!!

Quelle

2013-02-17 Deividi Cavarzan

ng-Mantel und/oder ng-bind kann dieses Problem nicht lösen, weil Dies ist kein "flash of uncompiled content" -Problem. Diese Direktiven sollen Inhalte verbergen, bis Angular eine Chance hatte, das HTML zu kompilieren.

Das Problem, das Sie versuchen zu lösen, ist eher wie: "Ich füge Sachen auf der Seite dynamisch hinzu und Sachen bewegen sich herum". Wenn du die Fußzeile erst anzeigen willst, nachdem der Hauptinhalt geladen wurde, mag ich die Lösung @Alex in seinem Kommentar vorgestellt.

Quelle

2013-02-19 15:44:27

Ich habe das selbe versucht, aber es blinkt immer noch beim Neustart in Firefox ... – Sikander

Haben Sie überprüft, ob Sie CSS-Regeln haben, die Konflikte mit der Regel ng-cover verursachen können? Dies könnte bei anderen Stilen, Bibliotheken usw. vorkommen.

Wenn Sie Regeln haben, die Konflikte verursachen, reicht es möglicherweise nicht aus, display:none; hinzuzufügen.

Siehe Angularjs - ng-cloak/ng-show elements blink

Wenn dies der Fall ist, die Lösung zu verwenden ist wichtig, dies zu überwinden:

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

Quelle

2013-02-18 03:13:32

Danke für Ihre Hilfe Alex. Ich habe deine Referenz gelesen, und wenn ich das wichtige Tag in mein CSS bringe, ist es schon da! Ich denke, dass, weil 2 getrennte Vorlagen sind, die Footer-Vorlage vor dem ersten rendern. Ich habe versucht, die App so asynchron zu starten, aber das Problem bleibt bestehen. Die einzige Lösung, die ich an dieser Stelle gefunden habe, ist, den Inhalt der Fußzeile in meine Haupt-ng-Ansicht einzufügen, aber vielleicht ist das nicht die beste Vorgehensweise, weil ich diesen Code auf jede Seite schreiben muss. –

Hmm, das macht Sinn. Eine andere Methode zu versuchen - anstelle von ng-Umhang, setzen Sie ng-show, aber auf eine Scope-Variable, die Sie nur einstellen, wenn Ihr Hauptinhalt geladen wurde/Anforderungen abgeschlossen haben usw. - so stellen Sie manuell ein, wann die Fußzeile angezeigt wird. –

Die beste Lösung für dieses Problem ist dieser Kommentar, vielleicht könnten Sie es in Ihre Antwort integrieren, @AlexOsborn? – markus

Wie Alex und Mark sagten, bietet ng-cover in diesem Fall keinen Vorteil. Ich habe jedoch etwas verwendet, das für mich funktioniert hat und auch anderen helfen kann.

Zunächst wird die Fußzeile nicht angezeigt.

dann, nachdem das Angular mit dem Laden des Inhalts fertig ist, erscheint die Fußzeile.

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

Quelle

2015-03-24 14:46:03

Fußzeile Vorlage blinkt auch mit ng-Umhang in AngularJS

Antwort

Verwandte Themen