ng-repeat图像上的指令仅提取有关第一个图像的信息

Directive on ng-repeat images only pulls information about the first image

本文关键字：图像 第一个 信息 指令 ng-repeat 提取      更新时间：2023-09-26

我的目的是根据高度和宽度动态添加一个类，以便它适合div。这里的这个指令是拉动高度和宽度，然后添加类。我遇到的问题是它获取第一个图像的信息，并使用该数据将类添加到所有其他图像中。因此，所有图像都返回"纵向图像"，即使它们需要"横向图像"。

这是我的指示

function dynamicImageDirective(){
    return {
        restrict: 'A',
        link: function(scope, elem, attr) {
            elem.on('load', function() {
                setTimeout(function(){
                    var w = $(this).width(),
                        h = $(this).height();
                    if (w > h) {
                        elem.addClass('landscape-image');
                    } else {
                        elem.addClass('portrait-image');
                    }
                },0);
            });
        }
    };
}

并重复：

 <div class="fullWidth" ng-repeat="gallery in public.galleries">
     <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 right">
        <div class="fullWidth display-inlineBlock verticalCenterDiv" style="height: 325px; padding: 0px;">
            <span class="helper"></span>
            <img ng-click="openLightboxModal($index)" class="vertical-middle" number="{{$index}}" ng-show="gallery.image_url" ng-src="{{gallery.image_url}}" dynamic-image="gallery">
        </div>
     </div>
</div>

我能够通过将其更改为"绑定"而不是"加载时"来使其工作。 

function dynamicImageDirective(){
    return {
        restrict: 'A',
        link: function(scope, elem, attr) {
            elem.bind('load', function() {
                var w = this.width;
                var h = this.height;
                if (w > h) {
                    $(this).addClass('landscape-image');
                } else {
                    $(this).addClass('portrait-image');
                }
            });
            elem.bind('error', function(){
            });
        }
    }
}
相关文章：