javascript - AngularJS:避免使用 $timeout 等待图像加载完成

Question

我正在尝试创建自己的图像轮播作为 angularjs 指令；我想让它尽可能轻巧和不拘一格，所以我想我只是创建一个 <carousel></carousel>一组 <img> 的包装器元素，像这样:

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

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

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

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

Answer 1

您需要再写一个指令，它将是 ng-repeat 呈现所有 img 标签的亲密 Angular 代码，然后我们将在上面添加监听器事件，该事件将设置该元素的高度和宽度在该图像的 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