AngularJS: 避免使用$timeout等待图片加载完成

Question

我正在尝试创建自己的图像轮播作为 angularjs 指令；我想尽可能保持它的轻量级和独立性，所以我想我只是为一组 <img> 元素创建一个 <carousel></carousel> 包装器，如下所示：

<carousel>
   <img ng-repeat="image in images" ng-src="{{image.src}}" alt=""/>
</carousel>

指令的作用是简单地创建一个 <div class="carousel"> 元素，图像被嵌入其中。现在，我仍然没有对图像滑动或淡入淡出的部分进行编码 in/out 因为有一个问题我想首先解决：我想为旋转木马和其中的所有图像分配相同的高度（计算为最短图像的高度）以避免在显示较高图像时轮播改变高度，或者避免在轮播具有固定高度的情况下裁剪图像。

所以我记下了 this JSFiddle 来进行演示，但到目前为止，我发现计算嵌入图像高度的最佳解决方案依赖于两个嵌套的 $timeouts，延迟为 100 毫秒。在我看来，它更像是黑客。
所以我想知道在 angularjs 中是否有 "proper" 方法来完成它。干杯。

P.S。在旁注中，我也不喜欢获取指令模板的根元素，在我的例子中是 <div class="carousel">，使用 element.children()...在 angularjs 中没有简单的方法来引用它？环顾四周，没有骰子。

Answer 1

你需要写一个更亲密的指令 angular ng-repeat 渲染所有 img 标签的代码然后我们将添加侦听器事件来设置高度和宽度该图像的 load 上的那个元素。

指令

.directive("carousel", ["$timeout", function ($timeout) {
    return {
        restrict: "E",
        transclude: true,
        template: "<div class=\"carousel\" ng-transclude></div>",
        link: function (scope, element, attrs) {
            var div = element.children();
            scope.$on('ngRepeatDone', function () {
                element.find('img').on('load', function () {
                    var images = div.children();
                    var minHeight = Math.min.apply(null, _.pluck(images, "height"));
                    angular.forEach([div, images], function (e) {
                        e.css({
                            height: minHeight + "px"
                        });
                    });
                    scope.$apply();
                });
            });
        }
    }
}])

NgRepeateDone

.directive('myPostRepeatDirective', function () {
    return function (scope, element, attrs) {
        if (scope.$last) {
            scope.$emit('ngRepeatDone')
        }
    };
});

Demo JSFiddle

AngularJS: 避免使用$timeout等待图片加载完成

AngularJS: avoid using $timeout to wait for image loading completion

javascript

angularjs

angularjs-directive

angularjs-ng-repeat

angularjs-timeout