21

我们主要将 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-tags 设置过滤器的更好方法？

4

1 回答 1

44

尝试替换src为ng-src更多信息，请参阅文档或这篇文章。

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

在 src 属性中使用像 {{hash}} 这样的 Angular 标记不能正常工作：浏览器将从带有文本 {{hash}} 的 URL 获取，直到 Angular 替换 {{hash}} 中的表达式。ngSrc 指令解决了这个问题。

于 2012-10-30T16:51:18.067 回答