Angularjs - ng-cloak / ng-show-Elemente blinken

Ich habe ein Problem in angle.js mit Direktive / Klasse ng-cloakoder ng-show.

Chrome funktioniert einwandfrei, aber Firefox verursacht ein Blinken der Elemente mit ng-cloakoder ng-show. IMHO wird es durch das Konvertieren ng-cloak/ ng-showzu verursacht style="display: none;", wahrscheinlich ist der Firefox-Javascript-Compiler etwas langsamer, also erscheinen die Elemente für eine Weile und verstecken sich dann?

Beispiel:

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

Obwohl die Dokumentation dies nicht erwähnt, reicht es möglicherweise nicht aus, die display: none;Regel zu Ihrem CSS hinzuzufügen . In Fällen, in denen Sie angle.js in den Body laden oder Vorlagen nicht früh genug kompiliert werden, verwenden Sie die ng-cloakDirektive und fügen Sie Folgendes in Ihr CSS ein:

/* 
  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;
}

Wie im Kommentar erwähnt, !importantist das wichtig. Zum Beispiel, wenn Sie das folgende Markup haben

<ul class="nav">
  <li><a href="/foo" ng-cloak>{{bar}}</a></li>
</ul>

und Sie verwenden gerade bootstrap.css, der folgende Selektor ist spezifischer für Ihr ng-cloaked-Element

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

Wenn Sie also einfach eine Regel einfügen display: none;, hat die Bootstrap-Regel Vorrang und displaywird auf festgelegt block, sodass das Flimmern angezeigt wird, bevor die Vorlage kompiliert wird.

Wie in der Dokumentation erwähnt , sollten Sie Ihrem CSS eine Regel hinzufügen, um sie basierend auf dem ng-cloakAttribut auszublenden :

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

Wir verwenden ähnliche Tricks auf der Website "Built with Angular", deren Quelle Sie auf Github anzeigen können: https://github.com/angular/builtwith.angularjs.org

Hoffentlich hilft das!

Stellen Sie sicher, dass AngularJS im headHTML enthalten ist. Siehe ngCloak doc :

Um das beste Ergebnis zu erzielen, muss das Skript angle.js in den Kopfbereich der HTML-Datei geladen werden. Alternativ muss die CSS-Regel (oben) im externen Stylesheet der Anwendung enthalten sein.

Ich hatte noch nie viel Glück mit ngCloak. Trotz allem, was oben erwähnt wurde, flackere ich immer noch. Die einzige todsichere Möglichkeit, ein Umblättern zu vermeiden, besteht darin, Ihren Inhalt in eine Vorlage einzufügen und die Vorlage einzuschließen. In einem SPA ist der einzige HTML-Code, der vor dem Kompilieren durch Angular ausgewertet wird, Ihre Hauptseite index.html.

Nehmen Sie einfach alles in den Körper und stecken Sie es in eine separate Datei und dann:

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

Auf diese Weise sollte niemals ein Flackern auftreten, da Angular die Vorlage kompiliert, bevor sie dem DOM hinzugefügt wird.

ngBind und ngBindTemplate sind Alternativen, für die kein CSS erforderlich ist:

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

Zusätzlich zur akzeptierten Antwort, wenn Sie eine alternative Methode zum Auslösen von ng-cloak verwenden ...

Möglicherweise möchten Sie Ihrem CSS / LESS auch einige zusätzliche Besonderheiten hinzufügen:

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

Ich hatte ein ähnliches Problem und fand heraus, dass das Element blinkt, wenn Sie eine Klasse haben, die Übergänge enthält. Ich habe erfolglos versucht, ng-cloak hinzuzufügen, aber durch Entfernen des Übergangs hörte die Schaltfläche auf zu blinken.

Ich verwende ein ionisches Framework und der Button-Outline hat diesen Übergang

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

Überschreiben Sie einfach die Klasse, um den Übergang zu entfernen, und die Schaltfläche hört auf zu blinken.

Aktualisieren

Auch bei ionic tritt bei Verwendung von ng-show / ng-hide ein Flimmern auf. Durch Hinzufügen des folgenden CSS wird das Problem behoben:

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

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

Ich hatte ein Problem, bei dem a <div ng-show="expression">zunächst für den Bruchteil einer Sekunde sichtbar war, obwohl "Ausdruck" anfangs falsch war, bevor die ng-show-Direktive ausgeführt werden konnte.

Die Lösung, die ich verwendete, bestand darin, die Klasse "ng-hide" wie in manuell hinzuzufügen <div ng-show="expression" ng-hide>, um sicherzustellen, dass sie anfänglich ausgeblendet gestartet wurde. Die ng-show-Direktive fügt danach die ng-hide-Klasse nach Bedarf hinzu / entfernt sie.

Versuchen Sie, den Firebug auszuschalten . Es ist mein ernst. Das hilft in meinem Fall.

Wenden Sie akzeptierte Antwort und dann stellen Sie sicher , dass Firebug in Firefox aktiviert ist ausgeschaltet : Drücken Sie F12 dann deaktivieren Firebug für diese Seite - kleine Schaltfläche in der oberen rechten Ecke.

Es gibt tatsächlich zwei separate Probleme, die das Flimmerproblem verursachen können, und Sie könnten entweder mit einem oder beiden konfrontiert sein.

Problem 1: ng-cloak wird zu spät angelegt

Dieses Problem wurde behoben, da in vielen Antworten auf dieser Seite beschrieben wird, ob AngularJS in den Kopf geladen ist. Siehe ngCloak doc :

Um das beste Ergebnis zu erzielen, muss das Skript angle.js in den Kopfbereich der HTML-Datei geladen werden. Alternativ muss die CSS-Regel (oben) im externen Stylesheet der Anwendung enthalten sein.

Problem 2: ng-Umhang wird zu früh entfernt

Dieses Problem tritt am wahrscheinlichsten auf, wenn auf Ihrer Seite viel CSS mit übereinander kaskadierenden Regeln vorhanden ist und die tieferen CSS-Ebenen aufblitzen, bevor die oberste Ebene angewendet wird.

Die jQuery-Lösungen in Antworten, die das Hinzufügen style="display:none"zu Ihrem Element beinhalten, lösen dieses Problem, solange der Stil spät genug entfernt wird (tatsächlich lösen diese Lösungen beide Probleme). Wenn Sie jedoch keine Stile direkt zu Ihrem HTML-Code hinzufügen möchten, können Sie mit die gleichen Ergebnisse erzielen ng-show.

Beginnend mit dem Beispiel aus der Frage:

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

Fügen Sie Ihrem Element eine zusätzliche ng-show-Regel hinzu:

<ul ng-show="isPageFullyLoaded && (foo != null)" ng-cloak>..</ul>

(Sie müssen behalten ng-cloak, um Problem 1 zu vermeiden).

Dann in Ihrem app.run Set isPageFullyLoaded:

app.run(['$rootScope', function ($rootScope) {
    $rootScope.$safeApply = function (fn) {
        $rootScope.isPageFullyLoaded = true;
    }
}]);

Beachten Sie, dass app.run je nach dem, was Sie gerade tun, möglicherweise der beste Ort zum Einstellen ist oder nicht isPageFullyLoaded. Das Wichtigste ist, sicherzustellen, dass der Wert isPageFullyLoadedauf true gesetzt wird, nachdem alles, was Sie nicht flackern möchten, dem Benutzer angezeigt werden kann.

Es hört sich so an, als ob Problem 1 das Problem ist, auf das das OP trifft, aber andere stellen fest, dass die Lösung nicht oder nur teilweise funktioniert, weil sie stattdessen oder auch Problem 2 treffen .

Wichtiger Hinweis: Achten Sie darauf, dass Sie Lösungen auf beide ng-Umhänge auftragen, die zu spät aufgetragen UND zu früh entfernt werden. Das Lösen nur eines dieser Probleme kann die Symptome möglicherweise nicht lindern.

Wir sind in unserem Unternehmen auf dieses Problem gestoßen und haben es gelöst, indem wir dem CSS-Styling für die flackernden ng-show-Elemente "display: none" hinzugefügt haben. Wir mussten überhaupt keinen Ng-Umhang tragen. Im Gegensatz zu anderen in diesem Thread ist dieses Problem in Safari aufgetreten, jedoch nicht in Firefox oder Chrome - möglicherweise aufgrund des faulen Repaint-Fehlers von Safari in iOS7 .

Für das, was es wert ist, hatte ich ein ähnliches Problem, dass der Umhang nicht funktionierte. Es kann sich lohnen, Ihre App / Site mit aktiviertem Cache zu überprüfen, um Quelldateien wiederzuverwenden und festzustellen, ob dies hilfreich ist.

Mit meinem flackernden Run-In habe ich mit geöffneten DevTools und deaktiviertem Cache getestet. Das Problem wurde behoben, indem das Panel mit aktiviertem Caching geschlossen blieb.

Das Problem wurde behoben, indem die folgenden Anweisungen im Head-Tag beibehalten wurden

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

offizielle Dokumentation

Ich konnte keine dieser Methoden zum Laufen bringen, also habe ich schließlich Folgendes getan. Für das Element, das Sie zunächst ausblenden möchten:

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

Fügen Sie dann in Ihrem Controller Folgendes oben oder unten hinzu:

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

Auf diese Weise wird das Element zunächst ausgeblendet und nur angezeigt, wenn der Controller-Code tatsächlich ausgeführt wurde.

Sie können die Platzierung an Ihre Bedürfnisse anpassen und möglicherweise eine Logik hinzufügen. In meinem Fall wechsle ich zu einem Anmeldepfad, wenn ich noch nicht angemeldet bin, und wollte nicht, dass meine Benutzeroberfläche vorher flackert. Deshalb habe ich $scope.stylenach der Anmeldeprüfung festgelegt .

Es ist besser zu verwenden ng-ifals ng-show. ng-if Entfernt und erstellt das Element im DOM vollständig neu und verhindert, dass ng-Shows blinken.

Ich verwende ein ionisches Framework. Das Hinzufügen eines CSS-Stils funktioniert unter bestimmten Umständen möglicherweise nicht. Sie können versuchen, ng-if anstelle von ng-show / ng-hide zu verwenden

Ref: https://books.google.com.my/books?id=-_5_CwAAQBAJ&pg=PA138&lpg=PA138&dq=ng-show+hide+flickering+in+ios&source=bl&ots=m2Turk8DFh&sig=8hNiWx26euGR2k_v= = onepage & q = ng-show% 20hide% 20flickering% 20in% 20ios & f = false

Sie sollten besser auf ein eckiges Dokument verweisen, da die Version [1.4.9] unten aktualisiert wurde, sodass sie die Direktive data-ng-cloak unterstützen kann.

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

Ich habe die oben genannte ng-cloak-Lösung ausprobiert, aber es gibt immer noch zeitweise Probleme mit Firefox. Die einzige Problemumgehung, die bei mir funktioniert hat, besteht darin, das Laden des Formulars zu verzögern, bis Angular vollständig geladen ist.

Ich habe einfach ng-init in die App eingefügt und ng-if auf der Formularseite verwendet, um zu überprüfen, ob die von mir festgelegte Variable bereits geladen ist.

<div ng-app="myApp" ng-init="loaded='yes'"> 
   <form ng-if="loaded.length > 0">
      <!--all my elements here-->
   </form>
</div>

Wenn Sie neben anderen Antworten feststellen, dass der Flash-Code des Vorlagencodes immer noch auftritt, haben Sie wahrscheinlich Ihre Skripte am Ende der Seite, was bedeutet, dass die Direktive ng-cloak direkt nicht funktioniert. Sie können Ihre Skripte entweder in den Kopf verschieben oder eine CSS-Regel erstellen.

In den Dokumenten heißt es: "Um das beste Ergebnis zu erzielen, muss das Skript angle.js im Kopfbereich des HTML-Dokuments geladen werden. Alternativ muss die obige CSS-Regel im externen Stylesheet der Anwendung enthalten sein."

Jetzt muss es kein externes Stylesheet sein, sondern nur ein Element im Kopf.

<style type="text/css">
  .ng-cloak {
    display: none !important;
  }
</style>

Quelle: https://docs.angularjs.org/api/ng/directive/ngCloak

Ich habe jede hier veröffentlichte Lösung ausprobiert und bin in Firefox immer noch flackernd geworden.

Wenn es jemandem hilft, habe ich es gelöst, indem ich es style="display: none;"zum Hauptinhaltsbereich hinzugefügt und dann jQuery verwendet habe (ich habe es bereits auf der Seite verwendet), $('#main-div-id').show();nachdem alles geladen wurde, nachdem Daten vom Server abgerufen wurden .

Ich habe tatsächlich festgestellt, dass der Vorschlag aus Rick Strahls Weblog mein Problem perfekt behoben hat (da ich immer noch das seltsame Problem hatte, dass ng-cloak manchmal roh {{code}} blinkt, insbesondere während Firebug ausgeführt wird):

Die nukleare Option: Den Inhalt manuell ausblenden

Die Verwendung des expliziten CSS ist die beste Wahl, daher sollte Folgendes niemals erforderlich sein. Aber ich werde es hier erwähnen, da es einen Einblick gibt, wie Sie Inhalte beim Laden für andere Frameworks oder in Ihren eigenen Markup-basierten Vorlagen manuell ausblenden / anzeigen können.

Bevor ich herausfand, dass ich den CSS-Stil explizit in die Seite einbetten konnte, hatte ich versucht herauszufinden, warum ng-cloak seinen Job nicht machte. Nachdem ich eine Stunde damit verbracht hatte, nirgendwohin zu gelangen, beschloss ich schließlich, den Container einfach manuell zu verstecken und zu zeigen. Die Idee ist einfach: Blenden Sie den Container zunächst aus und zeigen Sie ihn dann an, sobald Angular die erste Verarbeitung durchgeführt und das Vorlagen-Markup von der Seite entfernt hat.

Sie können den Inhalt manuell ausblenden und sichtbar machen, nachdem Angular die Kontrolle erhalten hat. Dazu habe ich verwendet:

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

Beachten Sie die Anzeige: Kein Stil, der das Element anfangs auf der Seite explizit verbirgt.

Sobald Angular seine Initialisierung ausgeführt und das Vorlagen-Markup auf der Seite effektiv verarbeitet hat, können Sie den Inhalt anzeigen. Für Angular ist dieses 'ready'-Ereignis die Funktion app.run ():

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

Dadurch wird die Anzeige effektiv entfernt: kein Stil und der Inhalt wird angezeigt. Zum Zeitpunkt des Auslösens von app.run () ist das DOM bereit, mit gefüllten oder zumindest leeren Daten angezeigt zu werden - Angular hat die Kontrolle erhalten.

Ich habe alle oben genannten Antworten ausprobiert und nichts hat funktioniert. Verwenden Sie ionic, um eine Hybrid-App zu entwickeln, und versuchen Sie, eine Fehlermeldung nicht flackern zu lassen. Am Ende löste ich mein Problem, indem ich meinem Element eine ng-hide-Klasse hinzufügte. Mein div hat bereits ng-show, um das Element anzuzeigen, wenn ein Fehler auftritt. Durch Hinzufügen von ng-hide wird das div so eingestellt, dass es nicht angezeigt wird, bevor der Winkel geladen wird. Kein ng-Umhang oder Winkel am Kopf erforderlich.

AS aus der obigen Diskussion

[ng-cloak] {
                display: none;
            }

ist der perfekte Weg, um das Problem zu lösen.

Ich verwende ng-show in einer Direktive, um Popups anzuzeigen und auszublenden.

<div class="..." ng-show="showPopup">

Keiner der oben genannten Punkte hat für mich funktioniert, und die Verwendung von ng-if anstelle von ng-show wäre ein Overkill. Dies würde bedeuten, dass bei jedem einzelnen Klick der gesamte Popup-Inhalt entfernt und zum DOM hinzugefügt wird. Stattdessen habe ich ein ng-if in dasselbe Element eingefügt, um sicherzustellen, dass es beim Laden des Dokuments nicht angezeigt wird:

<div class="..." ng-show="showPopup" ng-if="popupReady">

Danach habe ich die Initialisierung mit einer Zeitüberschreitung in den für diese Direktive verantwortlichen Controller eingefügt:

$timeout(function () {
    $scope.popupReady = true;
});

Auf diese Weise habe ich das flackernde Problem beseitigt und den kostspieligen Vorgang des Einfügens von DOM bei jedem einzelnen Klick vermieden. Dies ging zu Lasten der Verwendung von zwei Bereichsvariablen für denselben Zweck anstelle von einer, aber bisher ist dies definitiv die beste Option.

Versucht, ng-cloakaber immer noch kurz zu blinken. Unter Code befreien sie vollständig.

<body style="display:none;" ng-style="{'display':'block'}">

Keine der oben aufgeführten Lösungen hat bei mir funktioniert. Ich entschied mich dann, die eigentliche Funktion zu betrachten und stellte fest, dass beim Auslösen von „$ scope.watch“ ein Wert in das Namensfeld eingefügt wurde, was nicht der Fall sein sollte. Also habe ich im Code dann oldValue und newValue gesetzt

$scope.$watch('model.value', function(newValue, oldValue) {
if (newValue !== oldValue) {
validateValue(newValue);
}
});

Wenn in diesem Fall scope.watch ausgelöst wird, überwacht AngularJS im Wesentlichen die Änderungen an der Namensvariablen (model.value).

Ich würde das <ul>mit einem einwickeln<div ng-cloak>

Ich persönlich habe mich entschieden, das ng-classAttribut anstelle des zu verwenden ng-show. Ich habe viel mehr Erfolg auf diesem Weg gehabt, insbesondere bei Popup-Fenstern, die standardmäßig immer nicht angezeigt werden.

Was früher war <div class="options-modal" ng-show="showOptions"></div>

ist jetzt: <div class="options-modal" ng-class="{'show': isPrintModalShown}">

Das CSS für die Options-Modal-Klasse ist display: nonestandardmäßig aktiviert. Die Showklasse enthält das display:blockCSS.

Zeilenumbruch vermeiden

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

Funktioniert mit Firefox 45.0.1

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