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

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 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: loading ... . "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, loading ...

— 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

6

Você também pode usar em ng-attr-src="{{variable}}"vez de src="{{variable}}"e o atributo será gerado apenas quando o compilador compilar os modelos. Isso é mencionado aqui na documentação: https://docs.angularjs.org/guide/directive#-ngattr-attribute-bindings

— Martin Schüller
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