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

前端之家收集整理的这篇文章主要介绍了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 documentationthis 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相关文章