Na verdade, existem dois problemas separados que podem causar o problema de cintilação e você pode estar enfrentando um ou ambos.
Problema 1: o ng-cloak é aplicado tarde demais
Esse problema foi resolvido conforme descrito em muitas das respostas nesta página, para garantir que o AngularJS seja carregado na cabeça. Consulte o documento ngCloak :
Para o melhor resultado, o script angular.js deve ser carregado na seção head do arquivo html; Como alternativa, a regra css (acima) deve ser incluída na folha de estilo externa do aplicativo.
Problema 2: ng-cloak é removido muito cedo
É provável que esse problema ocorra quando você tiver muito CSS em sua página com regras em cascata umas sobre as outras e as camadas mais profundas do CSS piscarem antes da aplicação da camada superior.
As soluções jQuery nas respostas que envolvem adicionar style="display:none"
ao seu elemento resolvem esse problema desde que o estilo seja removido com atraso suficiente (na verdade, essas soluções resolvem os dois problemas). No entanto, se você preferir não adicionar estilos diretamente ao seu HTML, poderá obter os mesmos resultados usando ng-show
.
Começando com o exemplo da pergunta:
<ul ng-show="foo != null" ng-cloak>..</ul>
Adicione uma regra ng-show adicional ao seu elemento:
<ul ng-show="isPageFullyLoaded && (foo != null)" ng-cloak>..</ul>
(Você precisa se manter ng-cloak
para evitar o problema 1).
Em seguida, no seu app.run definido isPageFullyLoaded
:
app.run(['$rootScope', function ($rootScope) {
$rootScope.$safeApply = function (fn) {
$rootScope.isPageFullyLoaded = true;
}
}]);
Esteja ciente de que, dependendo exatamente do que você está fazendo, o app.run pode ou não ser o melhor local para definir isPageFullyLoaded
. O importante é garantir que a isPageFullyLoaded
configuração seja verdadeira depois que o que você não quiser piscar estiver pronto para ser revelado ao usuário.
Parece que o Problema 1 é o problema que o OP está enfrentando, mas outros estão descobrindo que a solução não funciona ou apenas parcialmente porque está atingindo o Problema 2 ou também.
Nota importante: Certifique-se de aplicar soluções às duas mangas ng que estão sendo aplicadas muito tarde E removidas em breve. Resolver apenas um desses problemas pode não aliviar os sintomas.