angular js - 一旦达到溢出就停止显示图像

Question

我有一堆图像，它们通过 mvc 文件结果（从我在其他地方托管的外部源）提供到页面上，并通过角度 ng-src 提供。

例如。

<div ng=repeat="img in Images">
        <img ng-src={{img.path}} style="height:100px;width:auto" />
</div>`

在这种情况下，我知道 img.path 总是转到外部 c# mvc 并将文件流返回到内容。

我希望只在屏幕上显示某个“总和”宽度的图像 - 这样我就不会显示一半的图像，例如我要在父 div 中使用“溢出：隐藏”。

有没有办法可以设置 ng-repeat 继续直到下一张图像溢出（从而完全防止溢出）？正在调整图像的大小，以便它们的高度全部设置为 100 像素，并且宽度按比例缩放以满足该大小。 `

我认为下面的指令可以解决问题，但它似乎出于某种原因重新缩放了图像..

App.directive('styleParent', function () {
    return {
        restrict: 'A',
        link: function (scope, elem, attr) {
            elem.on('load', function () {
                var w = $(this).width(),
                    h = $(this).height();

                var xPos = angular.element(this).prop('offsetLeft');
                xPos += w;

                var div = elem.parent();
                var d_width = div.width();
                var d_xPos = angular.element(div).prop('offsetLeft');
                d_xPos += d_width;

                console.log([xPos, d_xPos, this])
                if (xPos > d_xPos) {
                    angular.element(this).hide();
                }


            });
        }
    };
});

Answer 1

答案是将图像嵌套在另一个 div 中，像之前一样针对原始 div 测试图像位置，然后隐藏图像父 div 而不是图像本身。