Question

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

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

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

所以我记下了this JSFiddle进行演示，但到目前为止，我发现计算转换图像高度的最佳解决方案依赖于两个嵌套的$timeout，延迟为100毫秒。它看起来更像是一个黑客而不是任何东西所以我想知道是否有适当的＆＃34;在angularjs中完成它的方法。欢呼声。

P.S。另外，我也不喜欢在我的情况下使用<div class="carousel">来获取指令模板的根元素，element.children() ...是不是很容易在angularjs中引用它？看着周围，但没有骰子。

Answer 1

你需要再写一个指令，这个指令将是ng-repeat渲染所有img标签的亲密角度代码，然后我们将添加监听器事件，该事件将在{{{{{{{ 1}}那个图像。

<强>指令

load

<强> NgRepeateDone

.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();
                });
            });
        }
    }
}])

Demo JSFiddle

AngularJS：避免使用$ timeout来等待图像加载完成

1 个答案: