以角度对非活动页面采取行动答案

【问题标题】：Taking actions on inactive page in angular以角度对非活动页面采取行动
【发布时间】：2014-11-12 13:05:54
【问题描述】：

我是 AngularJS 的新手，来自 jQuery 背景。目前，我迈出了第一步，并使用 Angular 创建了一些示例页面。

现在我想实现这样的事情：想象一个有两个“页面”的应用程序。首先是带有一些文本等的主页，另一个是运行计时器。计时器应该从 0 开始，每秒计数到无限，就在您启动应用程序时。这是我无法实现的第一件事。我的计时器只有在我导航到第二页时才会启动。

第二个问题：当计时器运行时，我想浏览应用程序中的所有页面，并且计时器仍应在后台计数。好吧，目前它确实在后台运行，但是每次当我导航到带有计时器的页面时，似乎都会打开另一个计数计时器的任务，从而导致计数非常少且更快。

在我的索引 html 上，我使用 ng-view 通过 ngRoute 插入其他页面。这很好用。

我的计时器页面如下所示：

<div ng-controller="TimeCtrl">
    <p>Counter: {{counter.getValue()}}</p>
</div>

然后我为我的应用编写了一个计时器控制器：

app.controller("TimeCtrl", function($scope, $interval, Counter){

    $scope.counter = Counter;

    $interval(function(){
        $scope.counter.update();
    }, 1000);
});

还有一个计数器工厂：

app.factory("Counter", function () {

    this.counter = 0;

    var self = this;

    return {
        update : function () {
            self.counter++;
        },
        getValue : function () {
            return self.counter;
        }
    }
});

我会很感激任何帮助，因为 Angular 一开始对我来说并不容易。

【问题讨论】：

标签： javascript angularjs intervals angularjs-routing angularjs-factory

【解决方案1】：

不要在控制器上使用$interval，而是在服务/工厂上使用它：

app.factory("Counter", function ($interval) {
    this.counter = 0;
    var self = this;

    $interval(function(){
        self.update();
    }, 1000);  

    return {
        update : function () {
            self.counter++;
        },
        getValue : function () {
            return self.counter;
        }
    }
});

这样，如果您的TimeCtrl 被破坏（无论出于何种原因），计数器仍会递增。

另请注意，每次您重新打开创建新TimeCtrl 的页面时，也会定义一个新的间隔。这就是为什么你会得到“不频繁且更快的计数”。

关于它仅在第二页上加载，请确保将 Counter 服务作为依赖项添加到主控制器，以便立即实例化该服务（否则计数器将不会启动）。如果您没有主控制器，请使用 run block：

app.run(function(Counter) {
  // just inject the Counter so that it gets instantiated
})

【讨论】：