In my project, I decided to utilize an AngularJS factory to create new instance models. Each model includes a progress value that is manipulated based on user actions such as "start", "pause", and "stop".
app.factory('ModelA', ['$timeout', function($timeout) {
function ModelA(progress) {
this.progress = progress;
};
ModelA.prototype = {
startProgress: function() {
this.counterFunction();
},
counterFunction: function() {
this.progress++;
if(this.progress == 100) {
this.progress = 0;
}
//console.log(this.progress);
//console.log(this.counterFunction);
progressTimeout = $timeout(this.counterFunction, 1000);
},
// Haven't tested the method below
pauseProgress: function() {
$timeout.cancel(progressTimeout);
},
stopProgress: function() {
$timeout.cancel(progressTimeout);
this.progress = 0;
}
};
return ModelA;
}]);
After implementing the code, I encountered an issue where calling startProgress() in the ng-click expression resulted in the progress incrementing by 1 and then halting. Upon further inspection with logging, I discovered that this.counterFunction only displayed 1 and the entire function on the first call. Subsequent calls showed NaN for this.progress and undefined for the function.
As a newcomer to AngularJS, I would appreciate any assistance in resolving this issue. Thank you!