ajax – Angular.js – 在img src标签中过滤

我们使用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发送一个GET请求与Angular src像：

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

链接被编辑，所以它不会工作。其他客户吓坏了)

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

尝试用ng-src替换src以获取更多信息，请参见 the documentation或 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.

ajax – Angular.js – 在img src标签中过滤

相关文章