javascript - AngularJS--Cannot get timer to count down -
i working on time management app, , having trouble getting timer work. primary issue having passing timerduration value through each function timerdisplay automatically updated timer counts down.
after several days researching this, more confused. have read javascript docs, angularjs docs, mozilla's angularjs docs, numerous related stackoverflow questions , angular/javascript blogs.
there number of approaches have tried: using $scope in factory, doesn't work (angular has docs on this), putting timer logic in controller (not angular), , tried building custom directive, did not work. methinks misunderstanding something, cannot seem figure out is. putting timer logic in factory service, hope gain practical understanding of how build services work.
here's code:
controller
app.controller('timerctrl', ['$scope', '$interval', 'countdownclock', function($scope, $interval, countdownclock){ $scope.tasktimer = function() { countdownclock.timerdisplay($scope, 1500); $scope.start = function(){ countdownclock.start($scope); }; $scope.stop = function(){ countdownclock.stop($scope); }; $scope.reset = function(){ countdownclock.reset($scope, 1500); }; }; $scope.shortbreaktimer = function(){ $scope.timer(300); }; $scope.longbreaktimer = function(){ $scope.timer(1800); }; }]);
factory
app.factory('countdownclock', ['$interval', function($interval){ return { timerdisplay: function($scope, timerduration){ var scope = $scope; var self = this; scope.timerduration = timerduration; scope.seconds = '0' + parseint(scope.timerduration%60); scope.minutes = parseint(scope.timerduration/60); if(scope.seconds > 0 && scope.seconds !== 0){ scope.seconds = '0' + scope.seconds; } if(scope.minutes == 0){ scope.minutes = '0' + scope.minutes; } }, start: function($scope){ var scope = $scope; var self = this; isstopped = false; self.runtimer(); console.log('start ' + scope.timerduration); }, stop: function($scope){ var scope = $scope; scope.isstopped = true; }, reset: function($scope){ var scope = $scope; scope.timer = new timer($scope, timerduration); }, runtimer: function($scope){ var scope = $scope; if(self.isstopped){ self.isstopped = false; } if(scope.timerduration > 0){ var interval = $interval(scope.timerduration, 1000); } console.log('runtimer ' + scope.timerduration); if (timerduration === 0 || self.isstopped){ self.isstopped = true; $interval.cancel(interval); } scope.timerduration--; }, isstopped: function(){ isstopped = true; } }; }]);
update
i able countdownclock work. however, isn't working correctly. after more research , troubleshooting, think have nailed down timer function in countdownclock factory. though initial value of timerduration passed in parameter, , scope set, scope.timerduration = undefined.
what happening scope.timerduration? can't seem figure out.
updated controller
app.controller('timerctrl', ['$scope', 'countdownclock', function($scope, countdownclock){ $scope.tasktimer = function() { countdownclock.timer($scope, 1500); $scope.start = function(){ countdownclock.start($scope); }; $scope.stop = function(){ countdownclock.stop($scope); }; $scope.reset = function(){ countdownclock.reset($scope, 1500); }; }; $scope.shortbreaktimer = function(){ $scope.timer(300); }; $scope.longbreaktimer = function(){ $scope.timer(1800); }; }]);
updated factory
app.factory('countdownclock', ['$interval', function($interval){ return { timer: function($scope, timerduration){ var scope = $scope; scope.timerduration = timerduration; scope.seconds = '0' + parseint(scope.timerduration%60); scope.minutes = parseint(scope.timerduration/60); if(scope.seconds > 0 && scope.seconds !== 0){ scope.seconds = '0' + scope.seconds; } if(scope.minutes == 0){ scope.minutes = '0' + scope.minutes; } console.log('timer ' + 'scope.timerduration = ' + scope.timerduration); }, runtimer: function($scope, timerduration){ var scope = $scope; var self = this; if(self.isstopped){ self.isstopped = false; } if(scope.timerduration > 0){ var interval = $interval(self.timer, 1000); } if (scope.timerduration === 0 || self.isstopped){ self.isstopped = true; $interval.cancel(interval); } scope.timerduration--; }, start: function($scope, timerduration){ var scope = $scope; var self = this; self.isstopped = false; self.runtimer($scope, timerduration); }, stop: function($scope){ isstopped = true; }, reset: function($scope){ var scope = $scope; scope.timer = new timer($scope, timerduration); }, isstopped: function(){ isstopped = true; } }; }]);
Comments
Post a Comment