AngularJS：确定经过的时间，用于定期更新模型和视图

Question

上下文

我正在寻找创建一个 web 应用程序，该应用程序将一组数据视为自页面加载以来经过的时间的函数。想想“打开这个网页后你燃烧了多少卡路里”。

我仍在尝试围绕 AngularJS 服务、工厂等进行思考，并且想知道创建可用于定期（每秒）操作和更新 ng-model 的自动更新计时器的最佳方法是什么.

我如何（不成功）想象它会起作用：

我现在有这样的事情：

app.factory('Timer', function($timeout) {
    var time = 0;

    var Timer = function() {
        this.time++;
        this.timeout = $timeout(this.Timer, 1000);
    }
});

并用作

$timeout(function() {
    $scope.someNgModelVarForTheView = Timer.time * $scope.data;
}, 1000);

但是……好吧。在我看来，这很好用。事实上，这一切都发生了，如果我知道正确的方法，我就是在开玩笑......

所以我想，有两个问题：

• 如何将页面加载后的时间计算为可调用函数？
• 如何定期（每秒）重新计算数据模型？ $timeout 是个好方法吗？

Answer 1

如果你想拥有自己的服务，你可以这样做：

.factory('MyTimer', function($interval){
    return function(delay){
        var initialMs= (new Date()).getTime();
        var result = {totalMilliseconds:0, counts:0};                
        $interval(function() {
            result.totalMilliseconds = (new Date()).getTime() - initialMs;
            result.counts++;
        }, delay);
        return result;
    };
 })    

你可以这样使用它：

.controller('testController', function($scope, MyTimer){    
    $scope.t = MyTimer(1000);
});

在你的 html 中你可以这样做：

<div ng-app="app" ng-controller="testController">
   Total Ms: {{t.totalMilliseconds}}
   Counts: {{t.counts}}
</div>

Example

Answer 2

呃，我最终把我的想法过于复杂化了。这成功了：

var delay = 1000; // 1 sec
$scope.currentTime = 0;

$interval(function() {
  $scope.currentTime += delay;
  $scope.someData *= $scope.currentTime;
}, delay);