2

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

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

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

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

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

4

1 回答 1

3

您需要再编写一个指令，该指令将是 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();
                });
            });
        }
    }
}])

Ng重复完成

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

演示 JSFiddle

于 2015-05-29T11:45:09.757 回答