2012-10-30 19 views
21

Angular çoğunlukla arama motorumuz için oldukça karmaşıktır. Solr'u arama çerçevesi olarak kullanıyoruz ve arama sonuçlarımızı mükemmel bir şekilde çalışan AJAX/JSONP aracılığıyla ediniyoruz.Angular.js - Filtre içinde img src etiketi

Her arama sonucunda bir görüntü olmalı, ancak hiçbiri olmadığı ortaya çıkabilir. Arama sonucumda hiçbir img-URL bulunmadığında Internet Explorer'da kötü "X" leri önlemek için bir filtre kullanıyorum.

angular.module('solr.filter', []). 
    filter('searchResultImg', function() {  
     return function(input) { 
      if (typeof(input) == "undefined") { 
       return "http://test.com/logo.png"; 
      } else { 
       return input; 
      } 
     }; 
}); 

My bağlantılı görüntü kaynak kodunda şuna benzer: Ben, Infos, doğru "sorunu" Ben teslim edilir Dediğim gibi

<a href="{{doc.url}}"><img src="{{doc.image_url | searchResultImg}}"/></a> 

Kundakçı ile GET isteği gönderir olmasıdır Açısal kaynak gibi:

http://test.com/foldername/%7B%7Bdoc.image_url%20|%20searchResultImg%7D%7D 

Bağlantı düzenlendi, bu yüzden çalışmayacak. Diğer müşteri çığlığı;)

Bu davranışla ilgili deneyime sahip olan var mı, yoksa src etiketleri için filtreler ayarlamanın daha iyi bir yolu var mı?

+1

ilk sorunun düzeltebilirsiniz thru onerror attr How to use Janko

cevap

44

Daha fazla bilgi için ng-src ile src değiştirmeyi deneyin veya the documentation veya this post'a bakın. gibi Açısal işaretlemeyi kullanma

<a href="{{doc.url}}"><img ng-src="{{doc.image_url | searchResultImg}}"/></a> 

{{hash}} çalışmayan bir src özelliğinde sağa: literal metinle URL'den alıp bunu tarayıcı {{hash}} Eğik yerini dek {{hash}} içindeki ifade. ngSrc yönergesi bu sorunu çözmektedir.

+0

Çok teşekkürler! Bu yardımcı oldu :) – Hyque

İlgili konular