Angular.js belgeyi derlemeden / enterpolatlamadan önce çift kaşlı ayraç gösteriminin anlık olarak görüntülenmesini engelleyin

298

Yüklenecek bir dizi görüntü / komut dosyası olduğunda IE'de bir sorun gibi görünüyor {{stringExpression}}, biçimlendirmedeki hazır bilginin görüntülendiği iyi bir zaman olabilir , daha sonra derleme / enterpolasyonu ile açısal yapıldığında kaybolur. döküman.

Bunun genel olarak yanlış bir şey yaptığımı gösteren yaygın bir nedeni var mı veya bunu önlemenin bilinen bir yolu var mı?

angularjs

— JeremyWeir
kaynak

6

Bu yardımcı olabilir: branchandbound.net/blog/web/2013/08/some-angularjs-pitfalls

— Ismael

Yukarıdaki doğru çözümdü

— Edmund Rojas

283

ngCloakYönergeyi aradığınızı düşünüyorum : https://docs.angularjs.org/api/ng/directive/ngCloak

Belgelerden:

NgCloak yönergesi, Uygulamanız yüklenirken Açısal html şablonunun tarayıcı tarafından kısa bir süre ham (derlenmemiş) biçiminde görüntülenmesini önlemek için kullanılır. Html şablon ekranının neden olduğu istenmeyen titreşim etkisini önlemek için bu yönergeyi kullanın.

Yönerge <body>öğeye uygulanabilir , ancak tercih edilen kullanım, ngCloak tarayıcı görünümünün aşamalı olarak oluşturulmasına izin vermek için sayfanın küçük bölümlerine birden çok yönerge uygulamaktır

— pkozlowski.opensource
kaynak

1

Ham Açısal HTML kodundan kaçınmak için ngCloakyaygın / en iyi yöntem midir? Beyin yok gibi görünüyor, ama AngularJS'de deneyimli değilim.

— Kevin Meredith

32

Vücudun sonuna tüm komut dosyalarını yüklerseniz bunun işe yarayacağını sanmıyorum.

— trusktr

8

Aaah, bekleyin, nvm, en son komut dosyalarını yüklerseniz LOAS'ın cevabı çözümdür. .Ng-cloak sınıfını kullanın.

— trusktr

3

Etkili olabilmesi için HTML'nizin <head>bölümüne angularjs komut dosyasını yükleyin ngCloak.

— Mustafa

1

Ben yüklerseniz o mükemmel çalışıyor onaylayabilir angular.jsiçinde <head>benim sayfanın bölümüne.

— Aron Lorincz

197

Ayrıca, yerine kullanabilirsiniz {{hello}}.

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

— Andrew Joslin
kaynak

94

Ng-bind ile ilgili olarak bazen gözden kaçan bir özellik, Angular yüklenirken görüntülenecek metni belirleyebilmenizdir: loading ... . "yükleniyor ..." görünür, ardından myScopeProperty tanımlandıktan sonra değiştirilir.

— Mark Rajcok

@MarkRajcok: bahşiş için teşekkürler! Hiç bir fikrim yoktu. Bu çok basit ve zarif ve kendime ait bir problemi çözüyor.

— Jim Raden

9

Birden fazla ifadeye ihtiyacınız varsa ngBindTemplate kullanın. Örneğin, yükleniyor ...

— Mark Rajcok

27

Ayrıca {{merhaba || 'yükleniyor ...'}}

— Andrew Joslin

5

@AndyJoslin Güzel. Bu yaklaşımla, sayfa yüklendiğinde {{}} ifadesinin yanıp sönmesini önlemek için, sayfanın altına ters açılı js komut dosyasının başında olması gerekir.

— s_t_e_v_e

51

Komut dosyaları en son yüklendiğinde class = 'ng-cloak' yaklaşımının etkinliğini artırmak için, belgenin başına aşağıdaki css'nin yüklendiğinden emin olun:

.ng-cloak { display:none; }

— loas
kaynak

4

Önemli eklemek de kötü bir fikir değil.

— eomeroff

12

Daha visibility: hiddeniyi olmaz mıydı ?

— mpen

2

@eomeroff, ancak bir stilin seçilmesini teşvik etmek için !importantbir CSS kesmek (kötü şey), değil mi? CSS seçici kurallarını ihlal eder.

— Kevin Meredith

5

IMHO bu olaylardan biri önemli!

— lex82

3

@ Mark "görünürlük: gizli" nin hala şablon işaretlemesi için gereken alanı oluşturduğunu tahmin ederken, "display: none" hiçbir şey yapmaz. Yalnızca görünürlük gizlendiğinde, herhangi bir dış eleman, hiçbir şeyden boyuta büyümek yerine aniden gerçek iç boyuta çökebilir. Sanırım hangisi tercih ederse etsin. :)

— James Wilkins

40

Gizlenen CSS'yi sayfanın başına veya CSS dosyalarınızdan birine ekleyin:

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

Daha sonra ngCloak yönergesini normal Angular uygulamasına göre kullanabilirsiniz ve Angular'ın kendisi yüklenmeden önce bile çalışır.

Angular tam olarak bunu yapar: angular.js'nin sonundaki kod, sayfanın başına yukarıdaki CSS kurallarını ekler.

— Bennett McElwee
kaynak

+1 [ngcloak]Seçiciyi kendim buldum, ama bu daha eksiksiz.

— Pierre Henry

1

Müthiş cevap! Vücudumun sonunda Angular yüklüyorum, bu nedenle ngCloak kullanılamıyor ve hala {{}} yanıp sönüyor. Bu sorunu düzeltti.

— Scottie

21

Css'nizde folllowing ekleyin

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

Ve sonra kodunuzda ng-cloak yönergesi ekleyebilirsiniz. Örneğin,

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

Bu kadar!

— Nathan Senevirathne
kaynak

6

Bunun ng-attr-src="{{variable}}"yerine de kullanabilirsiniz src="{{variable}}"ve öznitelik yalnızca derleyici şablonları derlediğinde oluşturulur. Bu belgede burada belirtilmiştir: https://docs.angularjs.org/guide/directive#-ngattr-attribute-bindings

— Martin Schüller
kaynak

3

@ Pkozlowski.opensource yanıtına katılıyorum, ancak ng-saat sınıfı ng-repeat ile kullanmak için işe yaramadı. bu yüzden {{name}} ve ngCloak yönergesi gibi basit sınırlayıcı ifade için ng-tekrar için sınıf kullanmanızı tavsiye ederim.

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

ve

<li ng-repeat="item in items" ng-cloak>{{item.name}}<li>

— Jaison
kaynak

Bana hatayı fark ettiğiniz için teşekkürler

— Jaison