Question

我有一些搜索结果中的项目列表，有些项目有图像，有些项目没有。对于那些没有图像的项目，我想要显示占位符。

最好的方法是什么？ 我目前正在尝试使用函数（imageURL）并将其传递给循环/重复中当前项的图像详细信息。

<ion-item ng-repeat="listing in searchResults.listings">
                <div class="item item-image">
                    <img src="{{::searchResults.imageURL(listing._id,listing._source.filename1)}}">
                </div>
                .....

控制器内部（控制器为SearchResults）：

self = this;
.....
self.imageURL = function(listing_id, listing_filename) {

        if (angular.isUndefined(listing_id) || angular.isUndefined(listing_filename)) { //No image
            return placeholderImage; //We want to show placeholderImage
        }
        return self.imageURL + listing_id + "/" + listing_filename; //Show the image

    };

我稍后也将使用延迟加载器指令，因此当时不会直接使用“src”属性。

由于

Answer 1

我会创建一个替换src属性的指令，就像ng-src那样，并在内部处理您imageURL函数中当前的逻辑。

如果指令名为image-url，那么标记将如下所示：

<img image-url="listing">

你的指令看起来像这样：

app.directive('imageUrl', function () {
    return {
        scope: {
            imageUrl: '='
        },
        link: function (scope, element, attrs) {
            var imageUrl;
            if (angular.isUndefined(scope.listing._id) || angular.isUndefined(scope.listing._source.filename1)) { //No image
                imageUrl = placeholderImage; //We want to show placeholderImage
            }
            else {
                imageUrl = "/" + scope.listing._id + "/" + scope.listing._source.filename1; // Set the src attribute
            }
            element.attr("src", imageUrl); // Set the src attribute
        }
    };
});

由于[{3}}

中描述的原因，您真的不想直接绑定到src属性

Answer 2

使用ng-src而不是src。

来自angular docs;

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

AngularJS - 如果图像不存在则显示占位符

2 个答案: