Recently, I developed a stopwatch factory service that primarily focuses on running. Please disregard the reset and other functionalities as they are not yet implemented.
Despite setting up $scope.time to capture timer changes, it doesn't seem to update properly.
I've experimented with various methods, with my latest attempt being quite unconventional but worth trying.
Here is how my view looks:
<ion-view view-title="Clock">
<ion-content>
<div ng-controller="controller as ClockCtrl">
<h1 ng-bind="ClockCtrl.time"></h1>
</div>
</ion-content>
</ion-view>
This is my Controller:
.controller('ClockCtrl', function($scope, Stopwatch) {
var vm = $scope;
$scope.time = "";
Stopwatch.init($scope);
})
And here's my service setup:
factory('Stopwatch', function() {
var Stopwatch = (function() {
var s;
var isRunning = 0;
var time = 0;
var thatElement;
function run(element){
if(isRunning !== 0){
time++;
s.mills = time % 10;
s.secs = Math.floor(time / 10);
s.mins = Math.floor(time / 10 / 60);
//Stopwatch.currentTime = ("0"+s.mins).slice(-2)+":"+("0"+s.secs).slice(-2)+":"+("0"+s.mills).slice(-2);
thatElement.time = ("0"+s.mins).slice(-2)+":"+("0"+s.secs).slice(-2)+":"+("0"+s.mills).slice(-2);
setTimeout(run, 100);
}
};
return {
settings: {
currTime: "",
mills: 0,
secs: 0,
mins: 0,
i: 1,
times: ["00:00:00"],
},
currentTime: "",
init: function(element) {
thatElement = element;
s = this.settings;
this.start(element);
},
clear: function() {
s.i = 1,
s.mins = s.secs = s.mills = 0;
s.times = ["00:00:00"],
s.results.innerHTML = s.clearButton;
},
start:function(element){
isRunning = 1;
run(element);
},
stop: function(){
isRunning = 0;
}
}
})();
return Stopwatch;
})
Admittedly, I acknowledge the flaws in my recent approach. Any suggestions or tips would be greatly appreciated since this marks my initial encounter with Ionic and second trial with Angular.
Thank you in advance for your valuable insights!