ngShow Ladeverzögerung Ausgabe

Question

Ich habe ein Menü, das gleitet, wenn einige Tasten cliked sind, aber das Menü am Anfang versteckt ist, so etwas wie die:

<div ng-show="menuShow"> 
    my menu here... 
</div> 

Das Problem wird, wenn die Seite des Menü nicht geladen ist versteckt (wahrscheinlich, weil die ngShow-Direktive nicht geladen wurde) und dann verschwinden sie (wahrscheinlich weil die ngShow-Direktive geladen wurde) und machen einen seltsamen "Blink-Effekt" mit dem Menü.

Was ist der beste Weg, um mit diesem Problem umzugehen?

Answer 1

Am schnellsten und einfachsten wäre es, die Anweisung ngCloak dem Element hinzuzufügen.

<div ng-show="menuShow" ng-cloak> 
    my menu here... 
</div> 

Solange Angular synchron im Kopfteil des Dokuments geladen wird, soll dies das Flimmern verhindern.

Wenn Sie nicht Angular synchron geladen, dann according to the docs, Sie manuell die CSS der Seite hinzufügen könnte:

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

Und wenn dies aus irgendeinem Grund nicht möglich ist, können Sie einfach alle der Angular-Inhalt, der sich nicht auf der Seite beim ersten Laden befindet, aber von einer ng-include, ng-view oder ui-view Direktive oder einer benutzerdefinierten Anweisung mit eigener Vorlage eingeschlossen wird. (Dies ist, wie ich es mache, aber mehr aus strukturellen Gründen)

Answer 2

Ich konnte nicht ng-cloak zu arbeiten, auch bei der Anwendung der CSS-Regeln, so endete ich mit ng-if. https://docs.angularjs.org/api/ng/directive/ngIf

Es ergibt sich ein bisschen mehr Aufwand als Angular tatsächlich das Objekt aus dem DOM entfernen und legen Sie es jedes Mal den Wert von ng-if Änderungen, aber in meinem Fall war dies nicht sehr häufig und der Aufwand war nicht erkennbar.