Angular.js - 在img src标签中过滤

Question

我们主要使用Angular作为搜索表单,这非常复杂.我们使用Solr作为搜索框架,并通过AJAX/JSONP获取我们的搜索结果,这非常有效.

每个搜索结果中都应该有一个图像,但是没有图像可能会发生.当我的搜索结果中没有img-URL时,我使用过滤器来防止Internet Explorer中令人讨厌的"X".

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>

就像我说的那样,信息正确传递,我遇到的"问题"是Firebug向Angular src发送GET请求,如:

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

链接已编辑,因此无法使用.其他顾客吓坏了;)

有没有人有这种行为的经验或知道更好的方法来设置src标签的过滤器？

Answer 1

请尝试替换src以ng-src获取更多信息,请参阅文档或此文章.

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

在src属性中使用{{hash}}之类的Angular标记无法正常工作:浏览器将使用文字文本{{hash}}从URL中获取,直到Angular替换{{hash}}中的表达式.ngSrc指令解决了这个问题.