Create rotating banner with AngularJS?

0

I'm trying to create a rotating banner with AngularJS. I want the next 1 minute to be drawn a position of an array of images and to display the reference image.

How to do this?

I'm trying like this.

JS

var app = angular.module('starter');

app.controller('BannerAnuncios', function($scope, $timeout){

    var banners = ["imagem1.jpg", "imagem2.jpg", "imagem3.jpg", "imagem4.jpg", "imagem5.jpg"];
    var count = banners.length;

    function rotationBanner(){  
        var i = Math.floor(Math.random() * count);
        $scope.banner = banners[i];
        $timeout(rotationBanner(), 60000)
    }

    rotationBanner();

});

HTML

<div class="bar bar-footer bar-balanced" ng-controller='BannerAnuncios'>
      <img ng-src={{banner}}>
</div>
    
asked by anonymous 16.12.2015 / 14:27

1 answer

2

I'd say your problem is in line

$timeout(rotationBanner(), 60000)

Notice that you call the function $timeout and in the first parameter you already invoke the function rotationBanner , a function that returns nothing being expected to pass a function as a parameter, such as:

$timeout(function(){rotationBanner()}, 60000)

Or simplifying it a little more, since your function does not need any parameters it would be possible simply to do so

$timeout(rotationBanner, 60000)
    
16.12.2015 / 14:37