4

I'm using angular-timer: http://siddii.github.io/angular-timer/

My goal is to create a timer for an app that keeps reference to a variable somewhere else. That way instead of having a timer that just restarts on page load I will have a timer that consistently counts down regardless of what the user does. Most examples with angular-timer have you enter a countdown number. Is there any way to pass in a variable like so:

var timeRemaining = 1000;

<h1 class="timer"><timer countdown=timeRemaining max-time-unit="'minute'" interval="1000">{{mminutes}} minute{{minutesS}}, {{sseconds}} second{{secondsS}}</timer></h1>

Instead of being forced to write the countdown like this:

countdown="1000"

I've already tried passing in the variable via the toString() method as well. Thanks.

Xelad1
  • 175
  • 1
  • 18
  • There could be many ways, Where is the directive? – PSL Jan 14 '15 at 19:24
  • He is using the angular-timer directive as stated in the first line of the post. – ateich Jan 14 '15 at 20:06
  • @ateich Ok that was edited into the question after my comment. You can check the timing of the edit and comment time. :P – PSL Jan 14 '15 at 20:16
  • Do you mean passing a countdown based on a model value like this? `countdown="{{timeRemaining}}"` – Himmet Avsar Jan 14 '15 at 20:22
  • countdown is 2way bound `countdownattr: '=countdown',` you can set a property on the scope or integer value(special implementation is present for that). So `countdown="timeRemaining"` should just work, why don't you try it once. – PSL Jan 14 '15 at 20:26

2 Answers2

0

It looks like you cannot do what you are trying to without editing the directive itself.

Alternatively, you could use the timer from this question on your scope, just modify it to count down: https://stackoverflow.com/a/12050481/4322479

Counting down, from the question's comments: http://jsfiddle.net/dpeaep/LQGE2/1/

function AlbumCtrl($scope,$timeout) {
  $scope.counter = 5;
  $scope.onTimeout = function(){
      $scope.counter--;
      if ($scope.counter > 0) {
          mytimeout = $timeout($scope.onTimeout,1000);
      }
      else {
          alert("Time is up!");
      }
  }
  var mytimeout = $timeout($scope.onTimeout,1000);

  $scope.reset= function(){
      $scope.counter = 5;
      mytimeout = $timeout($scope.onTimeout,1000);
  }

}
Community
  • 1
  • 1
ateich
  • 520
  • 3
  • 10
0

No need to edit directive, you could also use ng-if on your timer element to check for your startTime variable. 

<timer ng-if="yourCountdownVaariable>0" countdown="yourCountdownVaariable" 
    max-time-unit="'hour'" interval="60000">
        {{hhours}} hour{{hoursS}}, {{mminutes}} minute{{minutesS}}
</timer>

This way, the directive will only be initialised when you have your date, and it will work. Original issue below:

https://github.com/siddii/angular-timer/issues/36

user3872761
  • 1