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

时间:2013-08-24 19:11:11

标签: javascript angularjs angularjs-service

我正在开发一个小型游戏/模拟应用程序,我需要一个应用程序范围的时间变量来更新自己。 它也可以是一个数字变量,对于我所关心的所有内容,它会不断增加,例如: 0..1..2..3..4每秒代表此模拟应用程序中的时间进度。 (这不一定是JavaScript Date Object本身)

我希望它可以在我注入的每个控制器/服务中访问,并在整个应用程序中自动更新。依赖于此时间变量的其他范围变量将自动更新AngularJS提供的所有双向绑定好东西。

这甚至是AngularJS app dev哲学中的“合法”线吗?如果是,那么构建它的最佳方法是什么?

3 个答案:

答案 0 :(得分:5)

你可以为那些可以在任何需要的地方注入的特殊服务构建一个特殊的服务,或者你只需​​将它放在$rootScope上。通常你应该避免把东西放在$rootScope上,因为全局状态通常是代码味道。但是,如果这真的是您的需要,那么这可能满足您的需求。

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

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

请注意,在我编写上述代码的方式中,Angular不会收到有关该更改的通知。但是,每隔一秒通知Angular有关这种变化可能不是您想要的,因为它可能导致严重的性能问题。只是为了澄清一些事情:如果你希望Angular得到有关更改的通知并更新所有绑定,那么变量更新将需要包含在$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/

答案 1 :(得分:0)

当我理解你的问题时,你会搜索 $ rootScope 。 在包含rootScope的每个Controller / Directive / Service中,您可以全局抛出内容。

Click here for the awesome AngularJS-Docu ;)

答案 2 :(得分:0)

$rootScope对全局变量的使用是一种应该避免的代码气味,如果可能的话。

更好的解决方案是使用工厂/服务,您可以将其注入任何需要它的组件。

有关详细信息,请参阅https://stackoverflow.com/a/18882147/2596608