Cumartesi , 21 Ocak 2017
Anasayfa » JavaScript » AngularJS » AngularJS ng-src Yönergesi

AngularJS ng-src Yönergesi

Bu yazıda ng-src bildiriminin kulllanımını ve neden kullanılması gerektiğini açıklayacağım.Hadi bunu bir örnek ile açıklayalım.

Örneği açıklamadan önce controller ve modül konuları ile ilgili makaleleri okumanızı tavsiye ederim.

Uye adında bir JavaScript nesnemizin olduğunu düşünelim. Üye nesnemiz isim, doğum tarihi ve profil özelliklerini barındırıyor olsun.  Uye nesnesine ait özellikleri görüntü tarafında göstermek istiyoruz. Bu işlem için yazılması gereken kod ve HTML şu şekilde olmalıdır.
SCRIPT:Controller ile aşağıdaki uye modelini inşaa ederiz. Uye nesnesi isim,dtarih ve profil özelliklerini tutacaktır. Bu nesneyi oluşturduktan sonra $scope parametresine yapıştırıyoruz.

 

HTML: View tarafında  kaynağı isim,dtarih ve profil şeklinde bağlıyoruz.

 

Burada img etiketinin src kısmına uye.profilin yazıldığına dikkat edin.

Uygulama çalışıyor. Resim de var. Sorun yok gibi görünebilir. Ancak şöyle bir sorun mevcut. Geliştirici ekranına geçtiğimizde resmin bulunamadığı için 404 hatası oluşturduğunu göreceksiniz.

angular-ng-src

Problemi anlamaya çalışalım. AngularJS en kısa sürede DOM nesnesini ayrıştırmaya çalışır. Fakat ayrıştırılma sayfanın yüklenmesinden sonra yapıldığı için img etiketine ait src özelliği içindeki ifade o sırada HTML için anlam ifade etmemektedir. Bu nedenle resim yüklenmez ve 404 hatası verir.

404 hatasını onarmak için  ng-src direktifi : src yerine ng-src bildirimini kullanmanız. 404 hatasının giderilmesini sağlayacaktır. AngularJS sayfa yüklendikten sonra resmi çağıracak ve yükleyecektir. Aşağıdaki kod ng-src ile düzeltilmiştir.

 

AngularJS Örnek Uygulama

 

AngularJS ile ilgili diğer yazıları da okumak istermisiniz.

 

Hakkında Hayri

İlginizi Çekebilir

AngularJS $anchorscroll Servis Kullanımı

$anchorscroll servisi sayfada belirtilen bir noktaya hareket etmek için kullanılır.  Bu yazıda $anchorscroll, $location servisleri ve $anchorscroll() …

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Wordpress Tema indir