Angular.js - img src टैग में फ़िल्टर करें

Question

हम मुख्य रूप से हमारे खोज फ़ॉर्म के लिए कोणीय का उपयोग करते हैं, जो कि बहुत जटिल है। हम सोलर खोज ढांचे के रूप में उपयोग करते हैं और AJAX/JSONP के माध्यम से हमारे खोज परिणाम प्राप्त करते हैं, जो पूरी तरह से काम करता है।

प्रत्येक खोज परिणाम में एक छवि होनी चाहिए, लेकिन ऐसा हो सकता है कि कोई भी नहीं है। मैं इंटरनेट एक्सप्लोरर में गंदा "एक्स" को रोकने के लिए फ़िल्टर का उपयोग करता हूं जब मेरे खोज परिणाम में कोई आईएमजी-यूआरएल नहीं होता है।

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

मेरे लिंक छवि स्रोत कोड में इस तरह दिखता है:

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

जैसा कि मैंने कहा, infos सही तरीके से वितरित कर रहे हैं, "समस्या" मेरे पास है Firebug गए एक GET अनुरोध भेजता है है कोणीय src की तरह:

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

लिंक संपादित किया जाता है, तो यह काम नहीं करेगा। अन्य ग्राहक फिक्र आउट;)

क्या किसी को इस व्यवहार के साथ अनुभव है या src-टैग के लिए फ़िल्टर सेट करने का बेहतर तरीका पता है?

Answer 1

src को ng-src के साथ the documentation या this post पर अधिक जानकारी के लिए बदलने का प्रयास करें।

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

तरह कोणीय मार्कअप का उपयोग करना {{हैश}} एक src विशेषता काम नहीं करता है में सही: ब्राउज़र शाब्दिक पाठ के साथ URL से लायेगा {{हैश}} तक कोणीय बदल देता है {{हैश}} के अंदर अभिव्यक्ति। ngSrc निर्देश इस समस्या को हल करता है।