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

【问题标题】：Directive on ng-repeat images only pulls information about the first image关于 ng-repeat 图像的指令仅提取有关第一个图像的信息
【发布时间】：2016-04-25 02:03:14
【问题描述】：

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

这是我的指令

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>

【问题讨论】：

显示您的ng-repeat 代码
或者它可能是 w 和 h 都为零并且它默认为条件的 else 部分。我会检查 w 和 h 的计算是否正确。我看不到该指令会导致它干扰其他指令。
另外加个codepen/plunkr来说明。
所以 w 和 h 每次都分别返回 1314 和 906。每次加载的图像都不同。一个特别是肖像，但它返回第一张图像的值并将结果提供给每张图像。

标签： javascript jquery angularjs image

【解决方案1】：

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

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(){

            });
        }
    }
}

【讨论】：