Angularjs: gli elementi ng-cloak / ng-show lampeggiano

Ho un problema in angular.js con direttiva / classe ng-cloako ng-show.

Chrome funziona bene, ma Firefox sta causando un battito di ciglia di elementi con ng-cloako ng-show. IMHO è causato dalla conversione ng-cloak/ ng-showin style="display: none;", probabilmente il compilatore javascript di Firefox è un po 'più lento, quindi gli elementi appaiono per un po' e poi si nascondono?

Esempio:

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

Anche se la documentazione non lo menziona, potrebbe non essere sufficiente aggiungere la display: none;regola al tuo CSS. Nei casi in cui si sta caricando angular.js nel corpo o i modelli non vengono compilati abbastanza presto, utilizzare la ng-cloakdirettiva e includere quanto segue nel CSS:

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

Come menzionato nel commento, !importantè importante. Ad esempio, se si dispone del seguente markup

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

e ti capita di usare bootstrap.css, il seguente selettore è più specifico per il tuo ng-cloakelemento

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

Quindi, se includi semplicemente una regola display: none;, la regola di Bootstrap avrà la precedenza e displaysarà impostata su block, quindi vedrai lo sfarfallio prima che il modello venga compilato.

Come menzionato nella documentazione , è necessario aggiungere una regola al CSS per nasconderla in base ng-cloakall'attributo:

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

Usiamo trucchi simili sul sito "Costruito con Angular", di cui puoi visualizzare l'origine su Github: https://github.com/angular/builtwith.angularjs.org

Spero che aiuti!

Assicurati che AngularJS sia incluso nel headcodice HTML. Vedi ngCloak doc :

Per il miglior risultato, lo script angular.js deve essere caricato nella sezione head del file html; in alternativa, la regola CSS (sopra) deve essere inclusa nel foglio di stile esterno dell'applicazione.

Non ho mai avuto molta fortuna con ngCloak. Continuo a tremolare nonostante tutto quanto menzionato sopra. L'unico modo infallibile per evitare lo sfarfallio è inserire il contenuto in un modello e includerlo. In una SPA, l'unico HTML che verrà valutato prima di essere compilato da Angular è la tua pagina index.html principale.

Basta prendere tutto all'interno del corpo e incollarlo in un file separato e quindi:

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

Non dovresti mai avere sfarfallio in quel modo poiché Angular compilerà il modello prima di aggiungerlo al DOM.

ngBind e ngBindTemplate sono alternative che non richiedono CSS:

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

Oltre alla risposta accettata se stai utilizzando un metodo alternativo per attivare ng-cloak ...

Potresti anche voler aggiungere alcune specificità aggiuntive al tuo CSS / MENO:

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

Ho avuto un problema simile e ho scoperto che se hai una classe che contiene transizioni, l'elemento lampeggerà. Ho provato ad aggiungere ng-cloak senza successo, ma rimuovendo la transizione il pulsante ha smesso di lampeggiare.

Sto usando la struttura ionica e il contorno del pulsante ha questa transizione

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

Basta sovrascrivere la classe per rimuovere la transizione e il pulsante smetterà di lampeggiare.

Aggiornare

Ancora su ionico c'è uno sfarfallio quando si utilizza ng-show / ng-hide. L'aggiunta del seguente CSS lo risolve:

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

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

Ho avuto un problema in cui a <div ng-show="expression">sarebbe stato inizialmente visibile per una frazione di secondo, anche se "espressione" era inizialmente falsa, prima che la direttiva ng-show avesse avuto la possibilità di funzionare.

La soluzione che ho usato è stata quella di aggiungere manualmente la classe "ng-hide", come in <div ng-show="expression" ng-hide>, per assicurarsi che fosse inizialmente nascosta. La direttiva ng-show aggiungerà / rimuoverà la classe ng-hide come necessario dopo ciò.

Prova a spegnere Firebug . Sono serio. Questo aiuta nel mio caso.

Applica la risposta accettata e assicurati che Firebug in Firefox sia disattivato : premi F12 quindi disattiva Firebug per questa pagina - piccolo pulsante nell'angolo in alto a destra.

In realtà ci sono due problemi separati che possono causare il problema dello sfarfallio e potresti trovarti ad affrontare uno o entrambi.

Problema 1: ng-cloak viene applicato troppo tardi

Questo problema è stato risolto come descritto in molte delle risposte in questa pagina per assicurarsi che AngularJS sia caricato nella testa. Vedi ngCloak doc :

Per il miglior risultato, lo script angular.js deve essere caricato nella sezione head del file html; in alternativa, la regola CSS (sopra) deve essere inclusa nel foglio di stile esterno dell'applicazione.

Problema 2: ng-cloak viene rimosso troppo presto

È molto probabile che questo problema si verifichi quando nella tua pagina sono presenti molti CSS con regole che si sovrappongono l'una all'altra e che i livelli più profondi di CSS lampeggiano prima dell'applicazione del livello superiore.

Le soluzioni jQuery nelle risposte che comportano l'aggiunta style="display:none"al tuo elemento risolvono questo problema purché lo stile venga rimosso abbastanza tardi (in realtà queste soluzioni risolvono entrambi i problemi). Tuttavia, se preferisci non aggiungere stili direttamente al tuo HTML, puoi ottenere gli stessi risultati usando ng-show.

A partire dall'esempio della domanda:

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

Aggiungi una regola ng-show aggiuntiva al tuo elemento:

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

(È necessario continuare ng-cloakper evitare il problema 1).

Quindi nel tuo set app.run isPageFullyLoaded:

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

Tieni presente che, in base esattamente a ciò che stai facendo, app.run potrebbe essere o meno il posto migliore da impostare isPageFullyLoaded. L'importante è assicurarsi che isPageFullyLoadedvenga impostato su true dopo che qualunque cosa tu non voglia sfarfallio è pronta per essere rivelata all'utente.

Sembra che il Problema 1 sia il problema che l'OP sta colpendo, ma altri stanno scoprendo che la soluzione non funziona o funziona solo in parte perché stanno colpendo il Problema 2 invece o anche.

Nota importante: assicurati di applicare entrambe le soluzioni a entrambi i mantelli ng applicati troppo tardi e rimossi a breve. Risolvere solo uno di questi problemi potrebbe non alleviare i sintomi.

Abbiamo riscontrato questo problema nella nostra azienda e risolto aggiungendo "display: none" allo stile CSS per quegli elementi sfarfallanti di ng-show. Non abbiamo dovuto usare affatto ng-cloak. A differenza di altri in questo thread, abbiamo riscontrato questo problema in Safari ma non in Firefox o Chrome, probabilmente a causa del bug pigro di ridipintura di Safari in iOS7 .

Per quello che vale, ho avuto un problema simile che ng-mantello non funzionava. Potrebbe valere la pena controllare l'app / il sito con la cache abilitata per riutilizzare i file di origine per vedere se ciò aiuta.

Con il mio rodaggio con sfarfallio, stavo testando con DevTools aperto e cache disabilitata. Lasciare il pannello chiuso con la cache abilitata ha risolto il mio problema.

Mantenere le seguenti istruzioni nel tag head risolto questo problema

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

documentazione ufficiale

Non sono riuscito a far funzionare nessuno di questi metodi, quindi alla fine ho fatto quanto segue. Per l'elemento che vuoi inizialmente nascosto:

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

Quindi nel controller, aggiungilo nella parte superiore o superiore:

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

In questo modo, l'elemento viene inizialmente nascosto e mostra solo quando il codice del controller è stato effettivamente eseguito.

Puoi adattare il posizionamento alle tue esigenze, magari aggiungendo un po 'di logica. Nel mio caso, passo a un percorso di accesso se non attualmente connesso e non volevo che la mia interfaccia tremolasse in anticipo, quindi ho impostato $scope.styledopo il controllo di accesso.

È meglio usare ng-ifinvece di ng-show. ng-if rimuove completamente e ricrea l'elemento nel DOM e aiuta a evitare il lampeggiamento di ng-shows.

Sto usando il framework ionico, l'aggiunta di stile CSS potrebbe non funzionare in determinate circostanze, puoi provare a usare ng-if invece di ng-show / ng-hide

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_WeyaVzdixJ8k&hl=en&sa=X&redir_esc=y#v = onepage & q = ng arrivo% 20hide% 20flickering% 20in% 20ios & f = false

faresti meglio a fare riferimento al documento angolare, perché la versione [1.4.9] ha un aggiornamento al di sotto che lo rende in grado di supportare la direttiva data-ng-cloak.

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

Ho provato la soluzione ng-cloak sopra ma ha ancora problemi intermittenti con Firefox. L'unica soluzione che ha funzionato per me è ritardare il caricamento del modulo fino a quando Angular non è completamente caricato.

Ho semplicemente aggiunto ng-init nell'app e utilizzo ng-if sul lato modulo per verificare se la variabile che ho impostato è già caricata.

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

Oltre ad altre risposte, se trovi che il flash del codice modello è ancora presente, è probabile che tu abbia i tuoi script in fondo alla pagina e ciò significa che la direttiva ng-cloak direttamente non funzionerà. Puoi spostare i tuoi script in testa o creare una regola CSS.

I documenti dicono "Per il miglior risultato, lo script angular.js deve essere caricato nella sezione head del documento html; in alternativa, la regola css sopra deve essere inclusa nel foglio di stile esterno dell'applicazione."

Ora, non deve essere un foglio di stile esterno ma solo un elemento nella testa.

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

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

Ho provato tutte le soluzioni pubblicate qui e ho ancora sfarfallio in Firefox.

Se aiuta qualcuno, l'ho risolto aggiungendo style="display: none;"al div contenuto principale, quindi usando jQuery (lo stavo già usando nella pagina) $('#main-div-id').show();una volta che tutto è stato caricato dopo aver ottenuto i dati dal server;

In realtà ho trovato il suggerimento dal Web Log di Rick Strahl risolto perfettamente il mio problema (dato che a volte avevo ancora lo strano problema con ng-cloak che lampeggiava {{code}}, specialmente durante l'esecuzione di Firebug):

L'opzione nucleare: nascondere il contenuto manualmente

L'uso del CSS esplicito è la scelta migliore, quindi non dovrebbe mai essere necessario quanto segue. Ma lo citerò qui in quanto fornisce alcune informazioni su come nascondere / mostrare manualmente i contenuti caricati per altri framework o nei propri modelli basati sul markup.

Prima di capire che potevo incorporare esplicitamente lo stile CSS nella pagina, avevo cercato di capire perché ng-cloak non stava facendo il suo lavoro. Dopo aver perso un'ora ad arrivare da nessuna parte, ho finalmente deciso di nascondere e mostrare manualmente il contenitore. L'idea è semplice: inizialmente nascondi il contenitore, quindi mostralo una volta che Angular ha completato l'elaborazione e la rimozione del markup del modello dalla pagina.

È possibile nascondere manualmente il contenuto e renderlo visibile dopo che Angular ha ottenuto il controllo. Per fare questo ho usato:

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

Notare la visualizzazione: nessuno stile che nasconde esplicitamente l'elemento inizialmente nella pagina.

Quindi una volta che Angular ha eseguito la sua inizializzazione ed elaborato in modo efficace il markup del modello sulla pagina, è possibile mostrare il contenuto. Per Angular questo evento 'pronto' è la funzione app.run ():

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

Questo rimuove efficacemente il display: nessuno stile e il contenuto viene visualizzato. Quando app.run () viene attivato, il DOM è pronto per essere visualizzato con i dati riempiti o almeno i dati vuoti: Angular ha ottenuto il controllo.

Ho provato tutte le risposte sopra e niente ha funzionato. Usando ionic per sviluppare un'app ibrida e stavo cercando di fare in modo che un messaggio di errore non sfarfallasse. Ho finito per risolvere il mio problema aggiungendo una classe ng-hide al mio elemento. Il mio div ha già ng-show per mostrare l'elemento in caso di errore. Aggiungendo ng-hide impostare il div in modo che non venga visualizzato prima del caricamento dell'angolare. Non è necessario nessun mantello o aggiungere angolare alla testa.

AS dalla discussione sopra

[ng-cloak] {
                display: none;
            }

è il modo perfetto per risolvere il problema.

Sto usando ng-show in una direttiva per mostrare e nascondere i popup.

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

Nessuna delle precedenti ha funzionato per me, e usare ng-if invece di ng-show sarebbe stato eccessivo. Ciò implicherebbe la rimozione e l'aggiunta dell'intero contenuto popup nel DOM ad ogni singolo clic. Invece ho aggiunto un ng-if nello stesso elemento per assicurarmi che non venga visualizzato al caricamento del documento:

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

Successivamente ho aggiunto l'inizializzazione al controller responsabile di questa direttiva con un timeout:

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

In questo modo ho eliminato il problema dello sfarfallio ed evitato l'operazione costosa di inserimento DOM ad ogni singolo clic. Questo ha comportato una spesa per l'utilizzo di due variabili dell'ambito per lo stesso scopo anziché uno, ma finora è sicuramente l'opzione migliore.

Lampi provati ng-cloakma ancora brevi. Di seguito il codice li libera completamente.

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

Nessuna delle soluzioni sopra elencate ha funzionato per me. Ho quindi deciso di esaminare la funzione effettiva e mi sono reso conto che quando "$ scope.watch" è stato attivato, stava inserendo un valore nel campo del nome che non era previsto. Quindi nel codice ho impostato e oldValue e newValue quindi

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

Essenzialmente quando scope.watch viene attivato in questo caso, AngularJS monitora le modifiche alla variabile name (model.value)

Avrei avvolto il <ul>con a<div ng-cloak>

Personalmente ho deciso di utilizzare l' ng-classattributo anziché ilng-show . Ho avuto molto più successo seguendo questa strada soprattutto per le finestre pop-up che non sono sempre mostrate di default.

Quello che era <div class="options-modal" ng-show="showOptions"></div>

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

con CSS per display: noneimpostazione predefinita la classe modale opzioni . La classe show contiene il display:blockCSS.

Evita l'interruzione di linea

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

Funziona con Firefox 45.0.1

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