I've implemented the Angular Timer directive (http://siddii.github.io/angular-timer/) in my application which is intended to track time spent across projects. The timer works as it should except for when I stop and restart the timer. Visibly, the timer appears to stop but when I restart it, after waiting 10 seconds for instance, that 10 seconds gets ADDED onto the displayed time and it continues counting from there. So it seems to be constantly running in the background.
I have the following code contained within my controller:
allProjects = [...array of objects here...];
$scope.timerRunning = true;
$scope.startTimer = function (){
$scope.$broadcast('timer-start');
$scope.timerRunning = true;
};
$scope.stopTimer = function (){
$scope.$broadcast('timer-stop');
$scope.timerRunning = false;
};
$scope.$on('timer-stopped', function (event, data){
console.log('Timer Stopped - data = ', data);
});
In my view I have the following HTML:
<tr ng-repeat="(key, project) in allProjects">
<td class="lead">{{project.title}}</td>
<td>{{project.description}}</td>
<td>
<timer autostart="false" interval="1000" start-time="project.time">{{hhours}}:{{mminutes}}:{{sseconds}}</timer>
<button class="btn btn-xs btn-default start" ng-click="startTimer()">start</button>
<button class="btn btn-xs btn-default stop"ng-click="stopTimer()">stop</button>
</td>
</tr>
Angular Timer example I borrowed from: http://siddii.github.io/angular-timer/examples.html#/angularjs-single-timer.