Impede que a notação da chave dupla seja exibida momentaneamente antes que o angular.js compile / interpola o documento

Parece ser principalmente um problema no IE quando há um número de imagens / scripts para carregar, pode haver uma boa quantidade de tempo em que o literal {{stringExpression}} na marcação é exibido e, em seguida, desaparecer quando o ângulo é feito com é compilation / interpolação do documento.

Existe uma razão comum pela qual isso aconteceria, o que indicaria que estou fazendo algo geralmente errado ou há uma maneira conhecida de evitar isso?

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

Da documentação:

A diretiva ngCloak é usada para evitar que o modelo de HTML angular seja brevemente exibido pelo navegador em seu formato bruto (não compilado) enquanto o seu aplicativo está sendo carregado. Use esta diretiva para evitar o efeito de cintilação indesejável causado pela exibição do modelo html.

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

Além disso, você pode usar vez de {{hello}} .

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

Para melhorar a eficácia da abordagem class = ‘ng-cloak’ quando os scripts são carregados por último, certifique-se de que o seguinte css é carregado na cabeça do documento:

 .ng-cloak { display:none; } 

Basta adicionar o CSS de camuflagem ao header da página ou a 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á antes mesmo que o próprio Angular seja carregado.

Isso é exatamente o que o Angular faz: o código no final do angular.js adiciona as regras CSS acima ao header da página.

Em seu css add folllowing

 [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,

 
Welcome {{data.name}}

É isso aí!

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

Eu concordo com a resposta do @ pkozlowski.opensource, mas a class ng-clock não funcionou para mim usando ng-repeat. então eu gostaria de recomendar você a usar classs para expressões delimitadoras simples como {{name}} e ngCloak para ng-repeat.

 
{{name}}

e

 
  • {{item.name}}