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

Popular posts from this blog

javascript - Using jquery append to add option values into a select element not working -

Android soft keyboard reverts to default keyboard on orientation change -

jquery - javascript onscroll fade same class but with different div -