Ng-src ve src kullanımı

Bu eğitici , direktifin aşağıdakiler ngSrcyerine kullanımını gösterir src:

<ul class="phones">
    <li ng-repeat="phone in phones" class="thumbnail">
        <img ng-src="{{phone.imageUrl}}">
    </li>
</ul>

Soruyorlar:

Ng-src direktifini eski bir src niteliğiyle değiştirin.
Firebug veya Chrome'un Web Denetçisi gibi araçları kullanarak veya web sunucusu erişim günlüklerini inceleyerek, uygulamanın gerçekten /app/%7B%7Bphone.imageUrl%7D%7D (veya / app / {{telefon .imageUrl}} ).

Bunu yaptım ve bana doğru sonucu verdi:

<li class="thumbnail ng-scope" ng-repeat="phone in phones">
    <img src="img/phones/motorola-xoom.0.jpg">
</li>

Nedeni var mı?

<img ng-src="{{phone.imageUrl}}"> 

Bu size beklenen sonucu verir, çünkü phone.imageUrldeğerlendirilir ve açısal yüklendikten sonra değeri ile değiştirilir.

<img src="{{phone.imageUrl}}">

Ancak bununla, tarayıcı {{phone.imageUrl}}, başarısız bir istekle sonuçlanan adlı bir görüntüyü yüklemeye çalışır . Bunu tarayıcınızın konsolunda kontrol edebilirsiniz.

Angular belgelerden

Yazmanın buggy yolu:

<img src="http://www.gravatar.com/avatar/{{hash}}"/>

Yazmanın doğru yolu:

<img ng-src="http://www.gravatar.com/avatar/{{hash}}"/>

Neden? bunun nedeni, sayfanın yüklenmesi sırasında, açısal önyüklemeden ve denetleyiciler oluşturulmadan önce, tarayıcının görüntüyü yüklemeye çalışacak http://www.gravatar.com/avatar/{{hash}}ve başarısız olacaktır. Daha sonra açısal bir kez başlatıldığında, bunun {{hash}}diyelim ile değiştirilmesi gerektiğini anlar logo.png, şimdi src özniteliği değişir http://www.gravatar.com/avatar/logo.pngve görüntü doğru şekilde yüklenir. Sorun şu ki giden 2 istek var ve birincisi başarısız oluyor.

Bunu çözmek ng-srciçin, açısal bir yönerge olan ve açısal olanı, ancak açısal önyükleme ve denetleyiciler tam olarak yüklendikten sonrang-src değeri src özniteliğine değiştirecek ve o zaman zaten doğru kapsam değeriyle değiştirilmiş olan kullanmalıyız.{{hash}}

src="{{phone.imageUrl}}"Gereksizdir ve tarayıcı tarafından ekstra isteği oluşturur. Tarayıcı, GETbu görüntüyü yüklemeye çalışırken en az 2 istekte bulunacaktır :

1. ifade değerlendirilmeden önce {{phone.imageUrl}}
2. ifade değerlendirildikten sonra img/phones/motorola-xoom.0.jpg

ng-srcAçısal ifadelerle uğraşırken her zaman yönerge kullanmalısınız . <img ng-src="{{phone.imageUrl}}">size tek bir isteğin beklenen sonucunu verir.

Bir yan notta , aynı şey için de geçerlidir, ng-hrefböylece ilk özet döngüsü başlayana kadar bağlantılarınız kopmaz.

Aslında% 100 mantıklıdır çünkü HTML sıralı olarak işlenir ve bu HTML sayfası satır satır işlenirken, bu görüntüye, satıra ve görüntüyü işlediğinde phone.imageUrlhenüz tanımlanmamıştır.

Ve aslında, Angular JS bu HTML yığınını henüz işlememiştir ve henüz bu yer tutucuları aramamış ve bu ifadeleri değerlerle değiştirmemiştir. Sonuçta olan şey, tarayıcının bu satırı alması ve bu resmi bu URL'den getirmeye çalışmasıdır.

Ve elbette bu sahte bir URL, içinde hala bu bıyık ve küme parantezleri varsa ve bu nedenle size bir 404 verir, ancak Angular bunu bir kez halleder, bu URL'yi uygun olanla değiştirir ve sonra görüntüyü hala görüyoruz, ancak yine de 404 hata mesajı konsolumuzda kalıyor.

Peki bununla nasıl ilgilenebiliriz? Normal HTML hilelerini kullanarak bunu halledemeyiz. Ancak Angular'ı kullanarak bununla ilgilenebiliriz. Bir şekilde tarayıcıya bu URL'yi getirmeye çalışmamasını, aynı zamanda yalnızca Angular bu yer tutucuların yorumlanmasına hazır olduğunda getirmesini söylememiz gerekir.

Bunu yapmanın bir yolu, buraya standart HTML özniteliği yerine bir Açısal öznitelik koymaktır. Ve Açısal niteliği adildir ng-src. Şimdi şunu söylersek, geri dönün, artık hata olmadığını göreceksiniz çünkü görüntü yalnızca Angular bu HTML'yi ele geçirip tüm ifadeleri değerlerine çevirdiğinde getirildi.