使用AngularJS自我旋轉圖像

Question

我想在AngularJS中創建一個自轉圖像查看器。對不起，如果這個問題似乎很愚蠢，但我無法弄清楚angularJS的方式。我知道我可以使用jQuery在那裏破解它，但我認爲它應該可以在AngularJS中單獨使用。

的HTML：

<div ng-controller="rotatorController"> 
    <div ng-switch on="pic" ng-animate=" 'animate' " id="rotator"> 
     <div ng-switch-when="1"><img src="/home/1.jpg"></div> 
     <div ng-switch-when="2"><img src="/home/2.jpg"></div> 
     <div ng-switch-when="3"><img src="/home/3.jpg"></div> 
    </div> 
    <div style="position: absolute; top: 600px" id="indexbuttons"> 
     <button ng-click="pic = '1';" class="button">1</button> 
     <button ng-click="pic = '2';" class="button">2</button> 
     <button ng-click="pic = '3';" class="button">3</button> 
    </div> 
</div> 

的CSS：

div#rotator { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    position: absolute; 
} 

.animate-enter, 
.animate-leave 
{ 
    -webkit-transition: 825ms cubic-bezier(0.455, 0.030, 0.515, 0.955) all; 
    -moz-transition: 825ms cubic-bezier(0.455, 0.030, 0.515, 0.955) all; 
    -ms-transition: 825ms cubic-bezier(0.455, 0.030, 0.515, 0.955) all; 
    -o-transition: 825ms cubic-bezier(0.455, 0.030, 0.515, 0.955) all; 
    transition: 825ms cubic-bezier(0.455, 0.030, 0.515, 0.955) all; 
    position: absolute; 
} 

.animate-enter { 
    left: 100%; 
} 
.animate-enter.animate-enter-active { 
    left: 0; 
} 

.animate-leave { 
    left: 0; 
} 
.animate-leave.animate-leave-active{ 
    left: -100%; 
} 

如何發送點擊事件，在angularJS indexbuttons？還是有更好的方式來循環這些圖片？

Plunker：http://plnkr.co/edit/QiYidN?p=catalogue

謝謝

Answer 1

你必須在你的控制器中添加一個循環。

app.controller('rotatorController', ['$scope', '$timeout', function($scope, $timeout) { 
    $scope.pic = 1; 

    var slideImage = function() { 
    var loop = $timeout(function changePic() { 
     if($scope.pic < 2){ 
      $scope.pic++; 
     } else { 
      $scope.pic = 1; 
     } 
     loop = $timeout(changePic, 2000); 
    },2000); 
    }(); 

}]) 

這裏是plunker