La direttiva ng-cloak viene rimossa troppo presto

Question

Ho un'app angular-js con alcuni controller che non dovrebbero essere mostrati inizialmente. Lampeggiano sullo schermo nonostante il mio uso di ng-cloak. Il problema sembra essere che la compilazione viene chiamata e rimuove le direttive e la classe ng-cloak, questo rende visibili i contenuti del controller anche se non dovrebbe essere perché ng-show è falso.

Se sospendere l'esecuzione js nel metodo di compilazione di ng mantello posso vedere gli elementi appaiono come direttiva ng mantello viene rimosso. Se metto in pausa l'esecuzione di js nel controller (ad esempio su "$ scope.visible = false;"), posso vedere che il controller rimane visibile sulla pagina. Il controller è quindi di nuovo invisibile come dovrebbe essere in un secondo momento nel caricamento.

• Sto caricando i miei app.js e angular.js nell'intestazione del documento
• ho il mio CSS nell'intestazione del documento
• ho incluso la regola CSS ng-mantello con "! Important" in il mio css esterno e in linea

Come posso evitare che questo lampeggi? Perché non ng-cloak paga rispetto a ng-show?

index.html:

<div ng-cloak class="ng-cloak" ng-controller="RoomsController" ng-show="visible"> 
    <h1>This flashes, it can be seen if we set a breakpoint in the controller js, or after the ng-cloak directive's compile method in angular.js</h1> 
</div> 

app.js:

app.controller('RoomsController', ['$scope', 
    function ($scope) { 
     $scope.visible = false; 
    } 
]); 

Answer 1

Ho riprodotto il problema e la cosa che ha funzionato per me era creare div interno e utilizzare la direttiva ng-if anziché ng-show. Spero possa essere d'aiuto.

<div data-ng-controller="RoomsController"> 
    <div ng-cloak class="ng-cloak" data-ng-if="visible" > 
     Some text 
    </div>   
</div> 

Answer 2

ngCloak direttiva nasconde gli elementi correlati fino alla fine compile processo. Questo è utile per nascondere la roba {{ someBinding }} e probabilmente nient'altro. Il collegamento e l'associazione effettivi nel processo linking.

Per evitare il lampeggiamento di un elemento, non dovrebbe essere lì finché l'applicazione non si avvia automaticamente. Puoi dare un'occhiata a ngInclude per i semplici widget e ngView per cose più grandi e complesse.

Answer 3

utilizzare un ng-nascondere nella classe, JS sarà toglierla o impostare nuovamente anche se il suo lì, ma fino a JS calci in esso può stare lì e usare i CSS per nascondere il proprio div

<div data-ng-controller="RoomsController"> 
    <div ng-cloak class="ng-cloak ng-hide" data-ng-if="visible" > 
     Some text 
    </div>   
</div> 

Answer 4

Ho avuto un problema simile con ngCloak in IE mobile. La soluzione più semplice mi è venuta è simile ad alcune delle altre risposte, ma io uso ng-spettacolo invece, e senza ulteriori $scope variabili:

<div class="ng-hide" ng-show="true"> 
    {{mydata}} 
</div> 

La soluzione richiede l'aggiunta della classe ng-hide e ng-show="true". Ciò garantisce che l'elemento sia visibile solo dopo aver collegato la direttiva ng-show.

Answer 5

Dopo un sacco fare in giro sono riuscito a "fissare" aggiungendo ng-hide classe all'elemento, durante la rimozione ng-cloak completamente:

<div class="ng-hide" ng-controller="RoomsController" ng-show="visible"> 
    <h1>This flashes, it can be seen if we set a breakpoint in the controller js, or after the ng-cloak directive's compile method in angular.js</h1> 
</div> 

Questo nasconde l'elemento inizialmente. Angolare rimuove quindi la classe ng-hide durante l'elaborazione della direttiva ng-show.