Angularjs - elementos ng-manto / ng-show piscam

Eu tenho um problema no angular.js com diretiva / classe ng-cloakou ng-show.

O Chrome funciona bem, mas o Firefox está causando a piscada de elementos com ng-cloakou ng-show. IMHO é causado pela conversão ng-cloak/ ng-showpara style="display: none;", provavelmente o compilador javascript do Firefox é um pouco mais lento, então os elementos aparecem por um tempo e depois ocultam?

Exemplo:

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

Embora a documentação não mencione isso, pode não ser suficiente adicionar a display: none;regra ao seu CSS. Nos casos em que você estiver carregando o angular.js no corpo ou os modelos não forem compilados em breve, use a ng-cloakdiretiva e inclua o seguinte no seu 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;
}

Como mencionado no comentário, o !importanté importante. Por exemplo, se você tiver a seguinte marcação

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

e você estiver usando bootstrap.css, o seletor a seguir é mais específico para o seu ng-cloakelemento ed

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

Portanto, se você incluir uma regra com simplicidade display: none;, a regra do Bootstrap terá precedência e displayserá definida como block, para que você veja o piscar antes da compilação do modelo.

Conforme mencionado na documentação , você deve adicionar uma regra ao seu CSS para ocultá-la com base no ng-cloakatributo:

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

Usamos truques semelhantes no site "Built with Angular", que você pode ver na fonte do Github: https://github.com/angular/builtwith.angularjs.org

Espero que ajude!

Verifique se AngularJS está incluído no headHTML. 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.

Eu nunca tive muita sorte usando o ngCloak. Ainda fico tremendo apesar de tudo mencionado acima. A única maneira segura de evitar movimentos rápidos é colocar seu conteúdo em um modelo e incluí-lo. Em um SPA, o único HTML que será avaliado antes de ser compilado pelo Angular é a sua página principal index.html.

Basta pegar tudo dentro do corpo e colá-lo em um arquivo separado e depois:

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

Você nunca deve piscar dessa maneira, pois o Angular compila o modelo antes de adicioná-lo ao DOM.

ngBind e ngBindTemplate são alternativas que não requerem 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>

Além da resposta aceita, se você estiver usando um método alternativo para ativar o ng-cloak ...

Você também pode adicionar algumas especificidades adicionais ao seu CSS / LESS:

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

Eu tive um problema semelhante e descobri que se você tiver uma classe que contém transições, o elemento piscará. Tentei adicionar ng-cloak sem sucesso, mas removendo a transição, o botão parou de piscar.

Eu estou usando estrutura iônica e o contorno do botão tem essa transição

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

Basta substituir a classe para remover a transição e o botão irá parar de piscar.

Atualizar

Novamente no iônico, há uma tremulação ao usar ng-show / ng-hide. Adicionar o seguinte CSS resolve:

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

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

Eu tive um problema em que um <div ng-show="expression">seria inicialmente visível por uma fração de segundo, mesmo que "expressão" fosse inicialmente falsa, antes que a diretiva ng-show tivesse a chance de ser executada.

A solução que usei foi adicionar manualmente a classe "ng-hide", como em <div ng-show="expression" ng-hide>, para garantir que ela fosse ocultada inicialmente. A diretiva ng-show adicionará / removerá a classe ng-hide conforme necessário depois disso.

Tente desligar o Firebug . Estou falando sério. Isso ajuda no meu caso.

Aplique a resposta aceita e verifique se o Firebug no Firefox está desativado : pressione F12 e, em seguida, desative o Firebug para esta página - pequeno botão no canto superior direito.

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-cloakpara 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 isPageFullyLoadedconfiguraçã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.

Encontramos esse problema em nossa empresa e o resolvemos adicionando "display: none" ao estilo CSS dos elementos oscilantes do ng-show. Não precisávamos usar ng-cloak. Ao contrário de outros neste segmento, enfrentamos esse problema no Safari, mas não no Firefox ou Chrome - possivelmente devido ao bug preguiçoso de repintar o Safari no iOS7 .

Pelo que vale, tive um problema semelhante que o ng-manto não está funcionando. Pode valer a pena verificar seu aplicativo / site com o cache ativado para reutilizar arquivos de origem para ver se isso ajuda.

Com o meu encontro com oscilação, eu estava testando com o DevTools aberto e com o cache desativado. Deixar o painel fechado com o cache ativado corrigiu meu problema.

Manter as instruções abaixo na tag head corrigiu esse problema

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

documentação oficial

Como não consegui fazer com que nenhum desses métodos funcionasse, fiz o seguinte. Para o elemento que você deseja ocultar inicialmente:

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

Em seguida, no seu controlador, adicione-o no topo ou perto dele:

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

Dessa forma, o elemento é oculto inicialmente e só é exibido quando o código do controlador foi realmente executado.

Você pode ajustar o canal às suas necessidades, talvez adicionando alguma lógica. No meu caso, eu mudo para um caminho de login, se não estiver conectado no momento, e não queria que minha interface tremeluzesse antes, então defini $scope.styleapós a verificação de login.

É melhor usar em ng-ifvez de ng-show. ng-if remove completamente e recria o elemento no DOM e ajuda a evitar que os ng-shows piscem.

Estou usando a estrutura iônica, a adição de estilo css pode não funcionar em determinadas circunstâncias. Você pode tentar usar ng-if em vez de 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_WeyaVhldix&hl=pt_BR = onepage & q = ng-show% 20hide% 20 tremulação% 20in% 20ios & f = false

é melhor fazer referência a um documento angular, pois a versão [1.4.9] possui uma atualização abaixo que permite suportar a diretiva data-ng-cloak.

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

Eu tentei a solução ng-cloak acima, mas ela ainda tem problemas intermitentes com o Firefox. A única solução alternativa que funcionou para mim é atrasar o carregamento do formulário até que o Angular esteja totalmente carregado.

Eu simplesmente adicionei ng-init no aplicativo e use ng-if no lado do formulário para verificar se a variável que eu defini já está carregada.

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

Além de outras respostas, se você achar que o flash do código do modelo ainda está ocorrendo, é provável que você tenha seus scripts na parte inferior da página e isso significa que a diretiva ng-cloak diretiva não funcionará. Você pode mover seus scripts para a cabeça ou criar uma regra CSS.

Os documentos dizem "Para obter o melhor resultado, o script angular.js deve ser carregado na seção principal do documento html; como alternativa, a regra css acima deve ser incluída na folha de estilo externa do aplicativo".

Agora, não precisa ser uma folha de estilo externa, mas apenas um elemento na cabeça.

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

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

Eu tentei todas as soluções postadas aqui e ainda fiquei piscando no Firefox.

Se isso ajuda alguém, resolvi adicionando style="display: none;"ao conteúdo principal div e, em seguida, usando o jQuery (eu já estava usando na página) $('#main-div-id').show();depois que tudo foi carregado depois de obter dados do servidor;

Na verdade, achei que a sugestão do Log da Web de Rick Strahl corrigia meu problema perfeitamente (como eu ainda tinha o estranho problema de ng-cloak piscar em bruto {{code}} às vezes, especialmente durante a execução do Firebug):

A opção nuclear: ocultando o conteúdo manualmente

Usar o CSS explícito é a melhor opção; portanto, o seguinte nunca deve ser necessário. Mas vou mencioná-lo aqui, pois fornece algumas dicas de como você pode ocultar / mostrar conteúdo manualmente durante o carregamento para outras estruturas ou em seus próprios modelos baseados em marcação.

Antes de descobrir que eu poderia incorporar explicitamente o estilo CSS na página, tentei descobrir por que o ng-cloak não estava fazendo seu trabalho. Depois de perder uma hora chegando a lugar nenhum, finalmente decidi ocultar e mostrar manualmente o contêiner. A idéia é simples - oculte o contêiner inicialmente e mostre-o assim que o Angular tiver processado e removido a marcação do modelo da página.

Você pode ocultar manualmente o conteúdo e torná-lo visível após o controle da Angular. Para fazer isso, usei:

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

Observe a exibição: nenhum estilo que oculte explicitamente o elemento inicialmente na página.

Depois que o Angular executar sua inicialização e processar efetivamente a marcação do modelo na página, você poderá mostrar o conteúdo. Para Angular, este evento 'ready' é a função app.run ():

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

Isso efetivamente remove a exibição: nenhum estilo e o conteúdo são exibidos. No momento em que o app.run () é acionado, o DOM está pronto para ser exibido com dados preenchidos ou pelo menos dados vazios - o Angular obteve controle.

Eu tentei todas as respostas acima e nada funcionou. Usando o ionic para desenvolver um aplicativo híbrido e estava tentando fazer uma mensagem de erro não piscar. Acabei resolvendo meu problema adicionando uma classe ng-hide ao meu elemento. Minha div já tem ng-show para mostrar o elemento quando há um erro. Adicionando ng-hide, defina a div para não ser exibida antes do carregamento angular. Não é necessário usar capa angular ou adicionar angular à cabeça.

AS da discussão acima

[ng-cloak] {
                display: none;
            }

é a maneira perfeita de resolver o problema.

Estou usando o ng-show em uma diretiva para mostrar e ocultar pop-ups.

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

Nenhuma das opções acima funcionou para mim, e usar ng-if em vez de ng-show seria um exagero. Isso implicaria remover e adicionar todo o conteúdo pop-up ao DOM a cada clique. Em vez disso, adicionei um ng-if ao mesmo elemento para garantir que ele não apareça no carregamento do documento:

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

Depois, adicionei a inicialização no controlador responsável por essa diretiva com um tempo limite:

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

Dessa forma, eliminei o problema de oscilação e evitei a operação cara da inserção do DOM a cada clique. Isso custou o uso de duas variáveis ​​de escopo para a mesma finalidade, em vez de uma, mas até agora essa é definitivamente a melhor opção.

Tentei, ng-cloakmas ainda breves piscadas. Abaixo o código os livra completamente.

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

Nenhuma das soluções listadas acima funcionou para mim. Decidi então examinar a função real e percebi que, quando "$ scope.watch" era acionado, ele colocava um valor no campo de nome que não era o caso. Então, no código que eu defini, oldValue e newValue então

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

Essencialmente, quando o scope.watch é acionado nesse caso, o AngularJS monitora as alterações na variável name (model.value)

Gostaria de envolver o <ul>com um<div ng-cloak>

Pessoalmente, decidi usar o ng-classatributo em vez do ng-show. Eu tive muito mais sucesso nessa rota, especialmente em janelas pop-up que nem sempre são mostradas por padrão.

O que costumava ser <div class="options-modal" ng-show="showOptions"></div>

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

com o CSS da classe options-modal sendo display: nonepor padrão. A classe show contém o display:blockCSS.

Evite quebra de linha

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

Funciona com o Firefox 45.0.1

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