We use Angular mainly for our search form, which is pretty complex. We use Solr as search framework and get our search results via AJAX/JSONP, which works perfectly.
There should be an image in every search result, but it can happen that there is none. I use a filter to prevent nasty "X"s in the Internet Explorer when there is no img-URL in my search result.
angular.module('solr.filter', []).
filter('searchResultImg', function() {
return function(input) {
if (typeof(input) == "undefined") {
return "http://test.com/logo.png";
} else {
return input;
}
};
});
My linked image looks like this in the source code:
<a href="{{doc.url}}"><img src="{{doc.image_url | searchResultImg}}"/></a>
Like I said, the infos are delivered correctly, the "problem" I have is that Firebug sends a GET request with the Angular src like:
http://test.com/foldername/%7B%7Bdoc.image_url%20|%20searchResultImg%7D%7D
The link is edited, so it won't work. Else customer freak out ;)
Does anyone have experience with this behaviour or knows a better way to set filters for src-tags?
Try replacing src with ng-src for more info see the documentation or this post.
<a href="{{doc.url}}"><img ng-src="{{doc.image_url | searchResultImg}}"/></a>
Using Angular markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrc directive solves this problem.