javascript - AngularJS:如何创建自动更新的应用程序范围变量

Question

我正在开发一个小型游戏/模拟应用程序，我需要一个可以 self 更新的应用程序范围的时间变量。它也可能是一个为我所关心的而不断增加的数字变量，例如每秒 0..1..2..3..4 表示此模拟应用程序中的时间进度。 (这不一定是 JavaScript 日期对象本身)

我希望它可以在我注入(inject)的每个 Controller /服务中访问，并在整个应用程序中自动更新。然后，依赖于该时间变量的其他范围变量将使用 AngularJS 提供的所有双向绑定(bind)功能自动更新。

这在 AngularJS 应用程序开发哲学中是“合法”的思路吗？如果是，构建它的最佳方法是什么？

Answer 1

您可以为其构建一个特殊的服务，可以将其注入(inject)到任何需要的地方，或者将其放在 $rootScope 上。通常，您应该避免将内容放在 $rootScope 上，因为全局状态通常是一种代码味道。但是，如果这确实是您的情况所需要的，那么这可能会满足您的需求。

您可以简单地将代码放在 run block 上，以便在加载模块后立即执行它。

myModule.run(['$rootScope', function($rootScope){
    setInterval(function(){
        $rootScope.now = new Date().getTime();
    }, 1000)
}]}

请注意，按照我编写上面代码的方式，Angular 不会收到有关该更改的通知。然而，每秒通知 Angular 有关该更改可能不是您想要的，因为它可能会导致严重的性能问题。只是澄清一下:如果您确实希望 Angular 收到有关更改的通知并更新所有绑定(bind)，则需要将变量更新包装在 $apply 调用中。

myModule.run(['$rootScope', function($rootScope){
    setInterval(function(){
        $rootScope.$apply(function(){
            $rootScope.now = new Date().getTime();
        });
    }, 1000)
}]}

还请注意，大多数时候您希望避免 setInterval，因为处理之间的时间可能是不确定的。大多数情况下，setTimeout 更适合。深入探讨这个问题超出了本答案的范围，但如果您想阅读该主题，我建议您阅读 John Resig 关于该主题的帖子:http://ejohn.org/blog/how-javascript-timers-work/