Question

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

每个搜索结果中都应该有一个图像，但可能没有。当我的搜索结果中没有img-URL时，我使用过滤器来防止Internet Explorer中令人讨厌的＆＃34; X＆＃34;

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>

就像我说的那样，信息是正确传递的，＆＃34;问题＆＃34;我有一个Firebug向Angular src发送GET请求，如：

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

链接已编辑，因此无法正常工作。其他顾客吓坏了;）

有没有人有过这种行为的经验，或者知道为src-tags设置过滤器的更好方法吗？

Answer 1

尝试将src替换为ng-src以获取更多信息，请参阅the documentation或this post。

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

在src属性中使用{{hash}}之类的Angular标记不起作用右：浏览器将使用文字文本从URL中获取 {{hash}}直到Angular替换{{hash}}中的表达式。该 ngSrc指令解决了这个问题。

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

1 个答案: