ng-cloak non funziona quando caricamento pagina

Sono nuovo in AngularJS e sto provando a risolvere il problema relativo alla visualizzazione di parte del codice HTML prima della valutazione di ng-if. Sto hsing ng-cloak come menzionato in molti altri stack rispetto agli URL di flusso ma non funziona ancora per me. Sto cercando di caricare l'immagine predefinita se l'immagine effettiva sull'URL è vuota e quando la pagina viene caricata, anche se l'URL attuale è lì, prima lampeggia con l'immagine predefinita e carica l'immagine reale perché ng-cloak non funziona correttamente.ng-cloak non funziona quando caricamento pagina

prega di aiuto.

devo sottostante Codice e CSS ecc

Index.HTML

<!DOCTYPE> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <base href="/"> 

    <title>Some App</title> 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-resource.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.min.js"></script> 
    <script src="https://code.angularjs.org/1.4.7/angular-sanitize.min.js"></script> 

    <style type="text/css"> 
     [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { 
     display: none !important; 
    }  
    </style>  
</head> 
<body ng-app="app"> 
some code here 
<div ng-view></div> 
</body> 
</html>

other.html

<div class="content"> 
    <div style="width: 100px; height: 40px;"> 

     <div ng-if="image.small"> 
      <img src="{image.small}}"> 
     </div> 
     <div ng-if="!image.small" ng-cloak> 
      <img src="image/default.png"> 
     </div> 
</div>

fonte

2015-11-20 ree

Si potrebbe usare qualcosa come di evitare l'uso ngIf –

@ItaloAyres, Grazie per la risposta, ma ho bisogno di utilizzare più condizioni come se image.small non c'è più controllo per image.large e se questo non è lì di caricare l'immagine di default. Non sono sicuro di come farlo usando questa condizione che hai mostrato, così ho provato a usare ng-se per questo. – ree

Utilizzo || assegnazione è un'espressione JS che restituisce il primo valore non nullo. Puoi usarlo con qualsiasi numero di variabili come questo: X = a || b || c, e X riceverebbe il primo con valore non nullo. –

È possibile applicare ng-cloak nel tag body. Quindi, tutto il corpo verrà visualizzato solo dopo la compilazione di angular.

<body ng-cloak ng-app="app"> 
.. 
</body>

Questo risolverà il problema.

fonte

2015-11-20 03:52:35

Grazie per aver risposto a @Abhilash P A ma questo non funziona altrettanto bene. Dopo aver applicato ng-cloak nel tag body, supponiamo di mostrare alcune informazioni relative a questo quando controllo lo strumento Developers su chrome? Vedo solo nello strumento per sviluppatori anche dopo aver aggiunto ng-cloak come hai mostrato nell'esempio. Ancora una domanda, devo caricare questo ng-cloak come un modulo simile a quello che aggiungiamo controller o servizio? – ree

@ree, No, non esiste un modulo per 'ng-cloak'. È solo una classe con proprietà 'display: none' e dopo la compilazione il compilatore angolare rimuoverà questa classe dall'elemento. –

Quindi questo non funziona ancora per me. Cosa dovrei fare ora. Per favore aiuto. Questo è esattamente ciò che ho nel mio codice ora. – ree

L'ho fatto sempre sul tag <html>. Mi piace <html ng-app="someApp" ng-cloak>

fonte

2015-11-20 06:03:34

la soluzione migliore è avere un caricatore mentre la tua app è in attesa dei dati. Invece di mettere il ng-if sull'elemento di sfarfallio, mettilo sul componente genitore e mostra un loader (potrebbe piacere che l'FB faccia una specie di simulazione della tua interfaccia utente).

fonte

2016-05-12 23:53:54 Ruben

-3

<div ng-if="image.small"> 
     <img src="{image.small}}"> 
    </div> 
    <div ng-if="!image.small" class="ng-cloak"> 
     <img src="image/default.png"> 
    </div>

fonte

2016-06-22 07:06:09

Potrebbe aggiungere ulteriori dettagli alla risposta? Rende più facile per OP sapere cosa ha sbagliato nel suo codice :) – Jer

Mentre questo frammento di codice può risolvere la domanda, [inclusa una spiegazione] (https://meta.stackexchange.com/questions/114762/explaining-entely -code-based-answers) aiuta davvero a migliorare la qualità del tuo post. Ricorda che stai rispondendo alla domanda per i lettori in futuro, e queste persone potrebbero non conoscere le ragioni del tuo suggerimento sul codice. Cerca anche di non affollare il tuo codice con commenti esplicativi, questo riduce la leggibilità sia del codice che delle spiegazioni! –

ng-cloak non funziona quando caricamento pagina

risposta

Problemi correlati