Impedir que a notação entre chaves duplas seja exibida momentaneamente antes que o angular.js compile / interpole o documento

298

Parece ser principalmente um problema no IE quando há várias imagens / scripts para carregar, pode haver uma boa quantidade de tempo em que o literal {{stringExpression}}na marcação é exibido e desaparece quando o angular é concluído com sua compilação / interpolação de o documento.

Existe uma razão comum para que isso aconteça, indicando que estou fazendo algo geralmente errado ou existe uma maneira conhecida de evitar isso?

angularjs JeremyWeir
fonte
6
Isso poderia ajudar: branchandbound.net/blog/web/2013/08/some-angularjs-pitfalls
Ismael
O acima foi a solução certa
Edmund Rojas

Respostas:

283

Eu acho que você está procurando a ngCloakdiretiva: https://docs.angularjs.org/api/ng/directive/ngCloak

A partir da documentação:

A diretiva ngCloak é usada para impedir que o modelo Angular html seja exibido brevemente pelo navegador em sua forma bruta (não compilada) enquanto o aplicativo está sendo carregado. Use esta diretiva para evitar o efeito indesejável de tremulação causado pela exibição do modelo html.

A diretiva pode ser aplicada ao <body>elemento, mas o uso preferido é aplicar várias ngCloak diretivas a pequenas partes da página para permitir a renderização progressiva da visualização do navegador.

pkozlowski.opensource
fonte
1
Para evitar o código HTML Angular bruto, ngCloaka prática é generalizada? Parece um acéfalo, mas não tenho experiência no AngularJS.
Kevin Meredith
32
Eu não acho que isso funcionará se você carregar todos os scripts no final do corpo.
trusktr
8
Aaah, espere, NVV, a resposta do LOAS é a solução se você carregar os scripts pela última vez. Use a classe .ng-cloak.
trusktr
3
Carregue o script angularjs na <head>seção do seu html para ngCloakser eficaz.
Mustafa
1
Posso confirmar que funciona perfeitamente se carregar angular.jsna <head>seção da minha página.
Aron Lorincz 19/07
197

Além disso, você pode usar em <span ng-bind="hello"></span>vez de {{hello}}.

http://jsfiddle.net/4LhN9/34/

Andrew Joslin
fonte
94
Um recurso sobre ng-bind que às vezes é esquecido é que você pode especificar o texto a ser exibido enquanto o Angular está carregando: <span ng-bind = "myScopeProperty"> loading ... </span>. "loading ..." aparecerá e será substituído assim que myScopeProperty for definido.
Mark Rajcok
@ MarkRajcok: obrigado pela dica! Eu não fazia ideia. Isso é muito simples e elegante e resolve um problema que eu mesmo já tive.
Jim Raden
9
Se você precisar de várias expressões, use ngBindTemplate. Por exemplo, <span ng-bind-template = "{{scopeProperty1}} {{scopeProperty2}}"> loading ... </span>
Mark Rajcok
27
Você também pode fazer {{olá || 'loading ...'}}
Andrew Joslin
5
@AndyJoslin Nice. Com essa abordagem, o script js angular precisa estar na cabeça, em oposição à parte inferior da página, para evitar que a expressão {{}} pisque quando a página for carregada.
#
51

Para melhorar a eficácia da abordagem class = 'ng-cloak' quando os scripts são carregados pela última vez, verifique se o seguinte css está carregado no cabeçalho do documento:

.ng-cloak { display:none; }
LOAS
fonte
4
Acrescentar! Importante também não é uma má idéia.
eomeroff
12
Não visibility: hiddenseria melhor?
MPEN
2
@eomeroff, mas !importanté um hack CSS (coisa ruim) para promover um estilo a ser selecionado, certo? Ele quebra as regras do seletor de CSS.
Kevin Meredith
5
IMHO este é um dos casos! Importante foi apresentado para.
lex82
3
@ Mark Eu acho que "visibilidade: oculto" ainda renderiza o espaço necessário para a marcação do modelo, enquanto "display: none" não renderiza nada. Com apenas a visibilidade oculta, quaisquer elementos externos podem entrar em colapso repentinamente para o verdadeiro tamanho interno, em vez de aumentar para o tamanho do nada. Suponho que seja o que alguém preferir. :)
James Wilkins
40

Basta adicionar o CSS de camuflagem na cabeça da página ou em um dos seus arquivos CSS:

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

Então você pode usar a diretiva ngCloak de acordo com a prática Angular normal, e ela funcionará mesmo antes do carregamento do Angular.

É exatamente isso que o Angular faz: o código no final do angular.js adiciona as regras CSS acima ao cabeçalho da página.

Bennett McElwee
fonte
+1 Eu [ngcloak]mesmo criei o seletor, mas isso é mais completo.
Pierre Henry
1
Resposta incrível! Carrego o Angular no final do meu corpo, portanto o ngCloak não está disponível e ainda pisca o {{}}. Isso consertou.
Scottie
21

Em seu css, adicione o seguinte

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

E então, no seu código, você pode adicionar a diretiva ng-cloak. Por exemplo,

<div ng-cloak>
   Welcome {{data.name}}
</div>

É isso aí!

Nathan Senevirathne
fonte
3

Concordo com a resposta @ pkozlowski.opensource, mas a classe ng-clock não funcionou para mim ao usar o ng-repeat. então eu gostaria de recomendar que você use classe para expressões delimitadoras simples como {{name}} e a diretiva ngCloak para ng-repeat.

<div class="ng-cloak">{{name}}<div>

e 

<li ng-repeat="item in items" ng-cloak>{{item.name}}<li>
Jaison
fonte
Obrigado por reparar me o erro
Jaison