Angularjs – ng-manto / ng-show elementos piscam

Eu tenho um problema em angular.js com diretiva / class ng-cloak ou ng-show .

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

Exemplo:

 
    ..

Embora a documentação não o mencione, talvez não seja suficiente adicionar a display: none; regra para o seu CSS. Nos casos em que você está carregando o angular.js no corpo ou os modelos não são compilados em breve, use a diretiva ng-cloak 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

  

e você está usando o bootstrap.css , o seletor a seguir é mais específico para o seu elemento ng-cloak ‘ed

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

Então, se você include uma regra com simplesmente display: none; A regra do Bootstrap terá precedência e a display será configurada para block , assim você verá o flicker antes do modelo ser compilado.

Como mencionado na documentação , você deve adicionar uma regra ao seu CSS para ocultá-lo com base no atributo ng-cloak :

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

Usamos truques semelhantes no site “Construído com Angular”, no qual você pode visualizar a fonte no Github: https://github.com/angular/builtwith.angularjs.org

Espero que ajude!

Certifique-se de que o AngularJS esteja incluído no head do HTML. Veja 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 com o ngCloak. Eu ainda fico piscando apesar de tudo mencionado acima. A única maneira infalível de evitar o flicking é colocar seu conteúdo em um modelo e include o modelo. Em um SPA, o único HTML que será avaliado antes de ser compilado pelo Angular é sua principal página index.html.

Apenas pegue tudo dentro do corpo e coloque-o em um arquivo separado e então:

  

Você nunca deve ter qualquer oscilação dessa maneira, pois o Angular irá compilar o modelo antes de adicioná-lo ao DOM.

ngBind e ngBindTemplate são alternativas que não requerem CSS:

 
{{name}}

Além da resposta aceita, se você estiver usando um método alternativo de 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 class que contenha transições, o elemento piscará. Eu tentei adicionar ng-cloak sem sucesso, mas removendo a transição o botão parou de piscar.

Eu estou usando o framework iônico e o botão de contorno tem essa transição

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

Basta sobrescrever a class para remover a transição e o botão parará de piscar.

Atualizar

Novamente no iônico há um flicker ao usar ng-show / ng-hide. Adicionando 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 onde um

seria inicialmente visível por uma fração de segundo, mesmo que “expression” fosse inicialmente falso, antes que a diretiva ng-show tivesse uma chance de ser executada.

A solução que usei foi adicionar manualmente a class “ng-hide”, como em

, para garantir que ela fosse inicialmente oculta. A diretiva ng-show adicionará / removerá a class 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, em seguida, verifique se o Firebug no seu Firefox está desativado : pressione F12 e desligue o Firebug para esta página – botão pequeno no canto superior direito.

Na verdade, existem dois problemas diferentes que podem causar o problema de cintilação e você pode estar enfrentando um ou ambos.

Problema 1: ng-cloak é aplicado tarde demais

Esse problema foi resolvido como descrito em muitas das respostas nesta página para garantir que o AngularJS seja carregado na cabeça. Veja 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-manto é removido muito cedo

É mais provável que esse problema ocorra quando você tem muito CSS na sua página, com as regras em cascata umas sobre as outras e as camadas mais profundas do CSS piscam antes que a camada superior seja aplicada.

As soluções da jQuery em respostas envolvendo a adição de style="display:none" ao seu elemento resolvem esse problema desde que o estilo seja removido o 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 o ng-show .

Começando com o exemplo da pergunta:

 
    ..

Adicione uma regra adicional ng-show ao seu elemento:

 
    ..

(Você precisa manter ng-cloak para evitar o problema 1).

Em seguida, no seu conjunto app.run, isPageFullyLoaded :

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

Esteja ciente de que, dependendo exatamente do que você está fazendo, app.run pode ou não ser o melhor lugar para definir isPageFullyLoaded . O importante é certificar-se de que isPageFullyLoaded seja configurado como true depois que o que quer que você não queira piscar esteja pronto para ser revelado ao usuário.

Parece que o Problema 1 é o problema que o OP está atingindo, mas outros estão achando que a solução não funciona ou funciona apenas parcialmente porque estão atingindo o Problema 2 .

Nota importante: Certifique-se de aplicar soluções para ambos os ng-cloak sendo aplicado muito tarde e removido para breve. Resolver apenas um desses problemas pode não aliviar os sintomas.

Nós nos deparamos com esse problema em nossa empresa e o resolvemos adicionando “display: none” ao estilo CSS para esses elementos ng-show piscando. Nós não precisávamos usar manto de ng. Ao contrário de outros neste segmento, tivemos esse problema no Safari, mas não no Firefox ou no Chrome – possivelmente devido ao bug de repique lento do Safari no iOS7 .

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

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

Manter as declarações abaixo na tag head corrigiu essa questão

  

documentação oficial

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

Eu estou usando o framework iônico, adicionando estilo css pode não funcionar para determinadas circunstâncias, você pode tentar usar ng-se 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_WeyaVzdixJ8k&hl=pt-BR&sa=X&redir_esc=y#v = onepage & q = ng-show% 20hide% 20flickering% 20in% 20ios & f = false

é melhor você consultar o documento angular, porque a versão [1.4.9] foi atualizada abaixo, para que possa 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 não consegui fazer nenhum desses methods funcionar, então eu finalmente fiz o seguinte. Para o elemento que você deseja inicialmente oculto:

 
style="display: none;" ng-style="style">

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

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

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

Você pode ajustar o posicionamento às suas necessidades, talvez adicionando alguma lógica. No meu caso, eu mudo para um caminho de login se não estiver logado no momento, e não queria que minha interface piscasse antes, então eu configurei $scope.style após a verificação logada.

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

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

 

Eu iria envolver o

    com um

    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 não funcionará. Você pode mover seus scripts para a cabeça ou criar uma regra de CSS.

    Os documentos dizem “Para o melhor resultado, o script angular.js deve ser carregado na seção head do documento html; alternativamente, a regra css acima deve ser incluída na folha de estilo externa do aplicativo.”

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

      

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

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

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

    Na verdade, achei que a sugestão do Web Log de Rick Strahl corrigiu meu problema perfeitamente (já que eu ainda tinha o problema estranho com o ng-manto piscando {{code}}), especialmente durante a execução do Firebug):

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

    Usar o CSS explícito é a melhor escolha, portanto, o seguinte nunca deve ser necessário. Mas vou mencioná-lo aqui, pois dá algumas dicas de como você pode ocultar / mostrar conteúdo manualmente ao carregar 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 o seu trabalho. Depois de desperdiçar uma hora chegando a lugar nenhum, finalmente decidi apenas esconder e mostrar manualmente o recipiente. A ideia é simples – inicialmente, oculte o contêiner e mostre-o assim que o Angular fizer o processamento inicial e remover a marcação do modelo da página.

    Você pode ocultar manualmente o conteúdo e torná-lo visível depois que o Angular obtiver controle. Para fazer isso eu usei:

      

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

    Depois que o Angular executar sua boot e processar efetivamente a marcação de modelo na página, você poderá mostrar o conteúdo. Para Angular, esse evento ‘ready’ é a function app.run ():

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

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

    Eu tentei todas as respostas acima e nada funcionou. Usando ionic para desenvolver um aplicativo híbrido e estava tentando fazer uma mensagem de erro não piscar. Acabei resolvendo meu problema adicionando uma class ng-hide ao meu elemento. Meu div já tem ng-show para mostrar o elemento quando há um erro. Adicionando ng-hide defina o div para não exibir antes que o angular seja carregado. Não ng-manto ou adicionando angular para a cabeça necessária.

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

     

    Nenhum dos itens 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 do popup ao DOM a cada clique. Em vez disso, adicionei um ng-if ao mesmo elemento para garantir que ele não seja exibido no carregamento do documento:

     

    Em seguida, adicionei a boot ao controlador responsável por esta diretiva com um tempo limite:

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

    Dessa forma, eliminei o problema da cintilação e evitei a operação dispendiosa da inserção do DOM a cada clique. Isso veio em detrimento do uso de duas variables ​​de escopo para o mesmo propósito, em vez de uma, mas até agora essa é definitivamente a melhor opção.

    Eu pessoalmente decidi usar o atributo ng-class em vez do ng-show . Eu tive muito mais sucesso nessa rota, especialmente para janelas pop-up que não são mostradas por padrão.

    O que costumava ser

    é agora:

    com o CSS para a class modal de opções sendo display: none por padrão. A class show contém o display:block CSS.

    Tentou ng-cloak mas ainda pisca brevemente. Abaixo, o código os livra completamente.

      

    Nenhuma das soluções listadas acima funcionou para mim. Decidi então olhar para a function real e percebi que quando “$ scope.watch” foi triggersdo, estava colocando um valor no campo de nome que não era para ser o caso. Então, no código que eu configurei e oldValue e newValue,

     $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 de nome (model.value)

    Evite quebra de linha

      

    Funciona com o Firefox 45.0.1