Frage AngularJS-Strategie zur Verhinderung von Flash-of-unstyled-Inhalten für eine Klasse


Ich habe ein AngularJS Projekt, ich möchte einen FOUC während des Ladens der Seite eines Klassennamens verhindern. Ich habe über ng-template gelesen, aber das scheint nur für den Inhalt innerhalb eines Tags nützlich zu sein.

<body class="{{ bodyClass }}">

Ich möchte, dass es beim Laden der Seite "eingeloggt" wird. Irgendeine Strategie dafür? Oder muss ich es nur täuschen und es als "Login" laden und manuell Javascript verwenden, um das DOM nur für diese Instanz zu optimieren.


48
2018-04-18 04:46


Ursprung


Antworten:


Was du suchst ist ng-cloak.
Sie müssen es so hinzufügen:

<body class="{{ bodyClass }}" ng-cloak>

und dies verhindert ein unerwünschtes Blinken.
Link zu Dokumenten zu diesem Thema.

Bearbeiten:
Es ist auch ratsam, das unten stehende Snippet in die CSS-Datei zu schreiben.

"Für das beste Ergebnis muss das Skript angular.js in den Kopf geladen werden   Abschnitt des HTML-Dokuments; alternativ muss die CSS-Regel oben stehen   in das externe Stylesheet der Anwendung aufgenommen werden. "

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

70
2018-04-18 06:13



Eines der Probleme, mit denen Sie konfrontiert sind, ist, dass der Browser das anzeigt <body> Element, bevor AngularJS das DOM geladen und gestartet hat. Über was andere Leute gesagt haben ng-class ist richtig, es wird die richtige Klasse anwenden, aber Sie müssen immer noch nichts zeigen, bevor Angular bereit ist.

In früheren Versionen von Angular konnten Sie dies tun:

<body style="display:none" ng-show="true" ng-class="{{bodyClass}}">

In neueren Versionen funktioniert das aber nicht, weil ng-show macht seine Sichtbarkeit durch Hinzufügen und Entfernen der ng-hide Klasse (die weniger spezifisch als ein Elementattribut ist)

Was ich in letzter Zeit gemacht habe, ist folgendes:

<head>
...
    <style> <!-- Or you could include this in an existing style sheet -->
        .ng-cloak {
            display: none !important;
        }
    </style>    
</head>
<body class="ng-cloak" ng-cloak ng-class="{{bodyClass}}">

Auf diese Weise zu tun bedeutet, dass die <body> wird sofort durch den Stil für die versteckt werden ng-cloak Klasse. Wenn Angular startet, wird es alle enthaltenen Anweisungen verarbeiten ng-class und ng-cloak, also dein <body> Element wird dann die richtige Klasse haben und sichtbar sein.

Lesen Sie hier mehr ng-Mantel-Richtlinie


20
2018-03-19 21:06



Es gibt eine Lösung für das Flash-Problem in reinem CSS, das kugelsicher ist. Fügen Sie für die Klasse Ihres App-Root-Elements Folgendes hinzu. Diese Lösung funktioniert nach der Reihenfolge der Verarbeitung: Alles ist in CSS versteckt, eckig ist geladen, und dann zeigt CSS den App-Root. Ich benutze das gerne, wenn es auf der Seite andere nicht eckige Elemente gibt, die zuerst gerendert werden, damit die Seite schneller geladen wird.

/* in your CSS file in head */
.myApp {
    display:none;
}

<div class="myApp" ng-app="myApp"></div>

Kurz bevor der Text endet, fügen Sie Ihre Skriptverweise und einige Inline-CSS hinzu:

<script language="javascript" type="text/javascript" src="angular.min.js"></script>
<style>
.myApp {
    display:block;
}
</style>
</body>

6
2018-05-23 02:46



Anstatt die Klasse zu verwenden, sollten Sie verwenden ng-Klasse

<body ng-class="{{ bodyClass }}">

3
2017-10-30 09:07



Ich habe bemerkt, dass manchmal sogar ng-Umhang nicht wirklich funktioniert. Vielleicht mache ich etwas falsch.

<body ng-cloak class="{{ bodyClass }}">

Ich mache auch noch eine kleine Sache ähnlich wie @mbokil Sie können das Element standardmäßig ausblenden. Mit einem Attributselektor, der auf Elemente mit dem Attribut ng-cloat abzielt, können Sie Winkelanweisungen verwenden. Dies hat mehrere Vorteile, aber der Hauptvorteil ist, dass sobald ein eckiges Feuer ausgelöst wird, dieses Attribut entfernt wird, was zu einem Neuzeichnen führen wird.

<style>
  [ng-cloak] {
    display:none;
  }
</style>

1
2017-08-26 15:41