AngularJS - 需要自动改变美国在计时器延迟 [英] AngularJS - Need To Change States Automatically On Timer Delay

问题描述

我很新的AngularJS并使用我的Web应用程序的 $ stateProvider 在需要时切换到不同的状态。

I am quite new to AngularJS and have my web application using the $stateProvider to change to various states when required.

不过，我试图找到一种方法，我可以遍历一个计时器一些不同的状态。因此，例如，当应用程序首次加载，显示第一页，然后30秒后显示第2页，30秒显示第3页，然后返回到第1页等等...

However, I am trying to find a way where I can loop through a number of different states on a timer. So for example, when the application first loads, show Page1, then after 30 seconds show Page2, another 30 seconds show Page 3 and then return back to Page1 and so on...

有谁知道这是可能的角度和 ui.router ？
如果是这样，请你指出我用一个例子或东西方向是正确的。

Does anyone know if this is possible with Angular and ui.router? If so, could you please point me in the right direction with an example or something.

推荐答案

这不是完全清楚什么是客观的，但你可以在<$ C使用 $间隔（） $ C>的run（）块，如果这是为了立即开始......或者，即使它不打算马上开始

It's not entirely clear what objective is but you could use $interval() in a run() block if this is intended to start immediately ... or even if it's not intended to start right away

一般尽量避免把事情rootScope但对于一个全球性的方法，喜欢的是需要，我不认为这是太糟糕以及避免重复添加code或注入在控制器的任何

generally try to avoid putting things in rootScope but for a global method like is needed I don't think it's too bad and avoids needing to add repetitive code or inject anything in controllers

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()
    });

现在你有机会来启动并在任何地方标记停止，无需一堆code添加到每个控制器/指令

Now you have access to start and stop anywhere in your markup without having to add a bunch of code to each controller/directive

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

<大骨节病> 演示

这篇关于AngularJS - 需要自动改变美国在计时器延迟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！