2013-07-05 27 views
12

Görüntüleri yüklemek için ng-src kullanıyorum. Değer bu gibi bazı kapsam değişkeninden yüklenir:AngularJS, model değiştiğinde img kaynağını güncelleştirmiyor

<img ng-src="{{currentReceipt.image}}"/> 

Sorunum delete $scope.currentReceipt çalıştırdığınızda, bu ng-src boş öznitelik yapar ama src Özellikte bunu yansıtmıyor olmasıdır. Sonuç olarak, boş yer tutucuya ihtiyacım olan görüntüyü görmeye devam ediyorum.

Bununla nasıl baş edebilirim?

+0

bir plunkr –

+0

Olası kopya koy yapabilir [boş ng-src güncelleme gelmez image] (ng-show'ı kullanmak için http://stackoverflow.com/questions/22092687/empty-ng-src-doesnt-update-image) –

cevap

22

Bu, ngSrc ve ngHref yönergelerinden beklenen davranıştır. Bu yönergeler yalnızca yeni yolları tanımayı destekler, ancak yol mevcut olmadığında direktifler exit silently olacaktır (burada bir çekme talebi görüyorum). görüntü değişken artık bulunmadığı durumlarda

Yani olası bir geçici çözüm tamamen etiketi gizlemek için ngHref birlikte ngShow kullanmak olabilir.

<img ng-href="{{currentReceipt.image}}" ng-show="currentReceipt.image" /> 
+1

+1, ayrıca görüntüyü DOM'dan kaldırmayı da düşünebilirsiniz. tamamen kaldırılmasını istiyorsanız 'ng-switch' ile. – Terry

+0

Teşekkürler, geçici çözüm önerileriniz gibi görünüyor. Ng-src yönergesini yöneten Açısal kodun içine bir göz attım ve fark ettim ki, sadece çıkmazsa, herhangi bir değer verilmediyse, mevcut src değerini veya bunun gibi bir şeyi kaldırmaz. Böyle vakaları yönetmek için ng-class kullanmaya karar verdim. Teşekkürler! –

+0

Sanırım yazarlar, yönergenin tanımlanmamış olması durumunda yönlendiricinin yalnızca çıkmasını istediler, çünkü src özniteliğinin kaldırılması/silinmesi, tarayıcının kırık görüntü minik resmini görüntülemesini sağlar; – Stewie

10

çağrı $ kapsamı $ uygulamak() silme $ kapsam sonra. currentReceipt.

1

aşağıdaki çözüm benim için çalışıyor:

<img ng-src="{{currentReceipt.image}}" ng-show="currentReceipt.image != null" /> 
0

Aslında uzunluğu denetlemek ve

<img ng-show="user.thumbnail.length > 1" class="img-circle thumb pull-left" ng-src="{{user.thumbnail}}" alt="{{user.firstname}} {{user.lastname}}"> 
İlgili konular