AngularJS：避免使用$超时等待图像加载完成

我想创建我自己的图像旋转木马作为angularjs指令;我想保持它作为轻便unopinionated的不可能性，所以我想我只是创造一个<carousel></carousel>包装一组<img>元素，像这样：

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

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

因此，我记下了this JSFiddle来演示，但到目前为止，我发现计算透印图像高度的最佳解决方案依赖于两个嵌套的$timeouts，延迟时间为100 ms。它看起来更像是一种黑客而非任何事情。
所以我想知道是否有一个“正确”的方式来完成它在angularjs中。干杯。

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

来源

2015-05-29 Andrea Aloi

因为没有'$ timeout'你的指令将之前'NG-repeat'运行呈现完毕后'img'的标签 –

优秀的方法，荣誉。 :) –

是的..我以为我实现了..它的工作..很高兴帮助你.. :) –

你需要写一个更直接的将是NG-重复渲染所有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

来源

2015-05-29 11:45:09

范围。$应用（）;'这里是一个很好的.....^ – Jai

@ Jai是的..我们需要它，因为我们正在对DOM事件进行范围操作，就像这里'.on（'load'）' –

AngularJS：避免使用$超时等待图像加载完成

回答

相关问题