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

Question

上下文

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

我仍然试图绕过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);