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：避免使用$超時等待圖像加載完成

回答

相關問題