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>

例