AngularJS-需要在定时器延迟时自动更改状态

Question

我是AngularJS的新手，我的web应用程序使用$stateProvider可以在需要时更改为各种状态。

然而，我正试图找到一种方法，让我可以在计时器上循环浏览许多不同的状态。例如，当应用程序第一次加载时，显示Page1，然后在30秒后显示Page2，再过30秒显示Page3，然后返回Page1，依此类推…

有人知道Angular和ui.router是否可能做到这一点吗？如果是的话，你能给我举个例子或其他什么东西，告诉我正确的方向吗。

Answer 1

目标是什么还不完全清楚，但如果要立即开始，可以在run()块中使用$interval()。。。或者即使它不打算立即启动

通常尽量避免将东西放在rootScope中，但对于需要这样的全局方法，我不认为这太糟糕，并且避免了添加重复代码或在控制器中注入任何东西

angular
    .module('myApp',[])
    .run(function($rootScope, $interval, $state) {
        var routeIdx = 0,
            routes = ['state1', 'state2','state3'];
        var routeTimer;
        $rootScope.routeLoop = {
            stopTimer: function() {
                $interval.cancel(routeTimer);
            },
            startTimer : function() {                  
                routeTimer = $interval(nextRoute, 1000);
            }
        }
        function nextRoute() {
            routeIdx++;
            if (routeIdx === routes.length) {
                routeIdx= 0;                   
            }
             $state.go(routes[routeIdx]);
        }
        // start it up
        $rootScope.routeLoop.startTimer()
    });

现在，您可以在标记中的任何位置启动和停止，而无需向每个控制器/指令添加一堆代码

<button ng-click="routeLoop.stopTimer()">Stop</button>

DEMO