通過AngularJS循環元素

Question

我創建了一個使用AngularJS的幻燈片應用程序，該應用程序使用由特定標記過濾的Instagram照片。這裏是demo和GitHub repo。

根據AngularJS原理循環這些圖像的最有效方法是什麼？

目前我使用一個$timeout其中第一元件與CSS移動到images陣列的底部組合其中隱藏除了第一個每隔一個圖像：

$scope.images = [ 
    'image-001.jpg', 
    'image-002.jpg', 
    'image-003.jpg' 
]; 

$timeout(function advanceSlide() { 
    $scope.images.push($scope.images.shift()); 
    $timeout(advanceSlide, 6000); 
); 

演示：http://jsfiddle.net/YruT6/1/

另一種選擇是步行photos對象並應用active類，如illustrated here。這會減少資源密集度嗎？

Answer 1

您的解決方案工作正常，但使用中繼器可能不那麼最好的策略：

• 所有的圖像將在DOM使用中繼器和操縱的陣列將導致所有的時間
• 一箇中繼器重新計算和DOM重新洗牌。

因此，對於更大的幻燈片，您會在DOM和頻繁/慢速DOM操作中擁有很多元素。我可以提出一個替代方法：

$scope.imgIndex = 0; 
$timeout(function advanceSlide() { 
    $scope.imgIndex = ($scope.imgIndex + 1) % $scope.images.length; 
    $timeout(advanceSlide, 1000); 
}); 

，然後在模板：

<div ng-app ng-controller="slideshow"> 
    <img ng-src="{{images[imgIndex].src}}"> 
</div>​ 

這裏是一個的jsfiddle：http://jsfiddle.net/ThmeZ/6/