siddii / angular-timer

re-usable/inter-operable AngularJS timer directive ⛺

angular-timer — A simple, re-usable, inter-operable timer directive

Getting started

With any of the following options...

• Download the latest script file - https://raw.github.com/siddii/angular-timer/master/dist/angular-timer.min.js
• Clone the repo - [email protected]:siddii/angular-timer.git
• Install angular-timer using Bower - bower install angular-timer
• Add timer to your list of modules

Requirements

With Bower install :

• Install humanize-duration using Bower - bower install humanize-duration
• Install momentjs using Bower - bower install momentjs

And include these scripts in your webpage :

• bower_components/momentjs/min/moment.min.js
• bower_components/momentjs/min/locales.min.js
• bower_components/humanize-duration/humanize-duration.js

Running locally

Install all bower components - bower install Using Grunt type grunt from command line, the default task will open index.html page in your default browser

Running tests

Following command will run both unit & End-to-End (e2e) tests

grunt tests

Examples

There are some examples on the index page http://siddii.github.io/angular-timer/index.html. Please go over them to get an understanding on how this module works.

angular-timer's Issues

no attribute $watch() ?

If I set a variable myTimer when we click on a button with the following HTML but it's seems that it's not working :

<div ng-init="myTimer = 9999999999999">
   Current `myTimer` : {{myTimer}}
   <br/>
   <button ng-click="myTimer = 88888888888888">Change the value to `88888888888888`</button>
   <button ng-click="myTimer = 9999999999999">Change the value to `9999999999999`</button>
   <br/>
   <timer end-time="myTimer">{{days}} days, {{hours}} hours, {{minutes}} minutes, {{seconds}} seconds.</timer>
</div>

It seems that the plugin does not $watch() the attibutes.

I added this monkey patch code in the plugin to test and it seems to work (line 39) :

$scope.$watch('endTimeAttr', function(newVal){
   if(newVal){
      $scope.start();
   }
});

Did I miss something or we could imagine to add some $watch() in the plugin?

Angular Timer is not working in IE8

awesome timer, but it is not working in IE8 and below browser, please help me out.

Set timer from model

Hi,

I see the other two issues are related with same topic. I read them, but it´s not clear to me.

I need to set the end-time attribute dinamically from a model (coming from REST API). I don´t want to go to a controller, because I need to apply it to every element in an array (inside a ng-repeat).

{{hours}}:{{minutes}}:{{seconds}}

Is it possible to do it?

Thanks,
Roberto.

License

Could you please include the license information for your code. I noticed the copyright but I'm unsure of the details. http://choosealicense.com/ could help. Thanks a bunch and the timer is awesome!

expression in end-date attribute doesn't work

Hallo, when I put expression in end-date eg. end-date="someModel" it don't work while {{someModel}} work beside element. Where is problem, am I doing something wrong?

Timer interval change

This is very flexible when you want to change time interval for polling or other timers.
Sid helped me with it. Below is solution.
http://plnkr.co/edit/NvHXxt?p=preview

Adding {{percentage}} as part of the directive.

Each time I do a variation of a timer, I'm typically writing excess to determine what percent of my timer has run.

Anyway we could get something like <timer start-time="" end-time="">{{percent}}</timer> ?

Add watch to timer

Hi,

I need to send a request to a REST API when a countdown is over. Is it possible?

How can I do it?

Thanks,
Roberto.

multiple timers in a repeat?

Hi Sidii,
great work on this lib.

I am trying to get multiple timers running using the timestamp from an array:

<div ng-repeat="category in categories">
   {{category.name}}
  <timer end-time="category.ts">{{days}}, {{hours}}, {{minutes}}, {{seconds}}.</timer>
</div>

This does not get the countdown running.
I'm kinda new to Angular so maybe I am missing some vital knowledge.
(I am trying to get this working using only Angular, without jQuery.)
Could you point me in the right direction on how to get this working?

Thanks!

time not format well?

I use the countdown example like this :
timer interval="1000" countdown="60"
but is output 59 with 000 like this

how i can remove 000

Feature request: Add events for 'end' and 'resume'

I've modified my version of timer to offer events for 'end' and 'resume', as I needed these in my application. see https://github.com/alexandrosm/worldmap/blob/master/app/scripts/controllers/main.coffee for the elegant code that enables.

In a perfect world I'd rename 'stop' to 'pause', but I've left it there for backwards compatibility.

Are you interested in me pushing the 'end' and 'resume' events?

See https://github.com/alexandrosm/worldmap/blob/master/app/scripts/vendor/angular-timer/angular-timer.js for the version running on worldmap.io

Bower support

It will be nice to have a bower support for this project.

If anyone wants to, I can fork the project and create the bower configuration for this.

Error: Non-assignable model expression: undefined (directive: timer)

Error: Non-assignable model expression: undefined (directive: timer)

got this always in FireFox.

Please refer to:

http://stackoverflow.com/questions/13594865/error-non-assignable-model-expression-undefined

This points to the problem. But I was not able to figure this out in your code.

Thanks for the great work with TIMER !

AddCDSecond doesn't reflect on stopped countdown timers UI

Convert json date format to primative format

Any way to implement the timer end-time="2014-05-29T00:00:00" inside the directive?

and how would we pass a date value from another scope provider?

see this plunker for example http://plnkr.co/edit/hO3Xrg

documentation request: bare minimal example

index.html has a lot of complicating factors that muddy the example (styling, etc). Can you build an even simpler one-page app showing the most basic usage?

Dynamically bind end-time (e.g. allow to pass variables via a controller)

Hello!
Thank you for your great work! I really like it!

I am using it as a count down timer to show that the event registration can start.

To follow the MVC pattern I am setting up some "dates" in the page controller and do some logic related to it, but unfortunately I am unable to pass my $scope.end-time variable to your directive <time end-time="{{end-time}}" ...

Do you have any suggestions how to achieve it?

Thank you very much!

Best regards,
Andrej

Using $on or $watch with timer-tick to trigger events

I've not been successful so far using $watch to trigger an event when something happens. A simple example is:

$scope.$watch('timer-tick', function (event, data) {
    if (data.millis == 300000) {
        alert('timer is below 5 minutes');
    };
    if (data.millis == 0) {
        $scope.timer = true;
        $scope.energyPost = false;
    };
})

Any suggestions for what I'm missing?

Countdown Timer.

I'm trying to implement the countdown timer. When it hits zero it jumps back to the start time and begins counting in the opposite direction ie. ++ instead of --

Any hints to the problem would be helpful.

Thanks.

seconds not showing a preceding 0

Here's my code

<timer interval="1000" countdown="100">{{minutes}}:{{seconds}}</timer>

this is the printed output once the countdown timer has ended

0:0

I noticed that a couple of times during the countdown it lacked a 0 as well

e.g

1:1

should be

1:01

Add method reset coutdown

I use it on a game. But can not reset countdown when the game is over.

Multiple independent timer?

Hi Siddique,

Does your module allows for multiple timers running and/or stopping independently?

If not, are you planning on implementing this feature?

Thanks,

Manu

Multiple timers with id

I have multiple timers on a page where each timer needs to be stopped and started at different events. Looking at examples/angularjs-multiple-timers.html i cannot find any hints on how to stop only a specific timer. Is it possible to pass an id to a timer to do that?

Non assignable

Hi there, great job on this timer btw.

Just wanted to let you know that I am getting a non-assignable error (code from the examples) in my console (Chrome - OS X) when using the countdown timer : {{mminutes}} minute{{minutesS}}, {{sseconds}} second{{secondsS}}

Error: [$compile:nonassign] Expression '10041' used with directive 'timer' is non-assignable!

Tried in using this plunkr and getting a similar error as well : http://plnkr.co/edit/a6bV3x?p=preview

Error: [$compile:nonassign] http://errors.angularjs.org/undefined/$compile/nonassign?p0=300&p1=timer
at Error (native)
at http://siddii.github.io/angular-timer/bower_components/angular/angular.min.js:6:453
at p (http://siddii.github.io/angular-timer/bower_components/angular/angular.min.js:46:42)
at Object. (http://siddii.github.io/angular-timer/bower_components/angular/angular.min.js:46:141)
at h.$digest (http://siddii.github.io/angular-timer/bower_components/angular/angular.min.js:103:284)
at http://siddii.github.io/angular-timer/dist/angular-timer.min.js:8:3948

how to display month and year

Can end time be defined without countdown?

I need to 'reverse' countdown in terms that I need my timer starts with 0 and ends on some particular moment, lets say 30s.

As a workaround I use 'timer-tick' event and check if the running time is the time when it needs to end, and if yes, then I stop the timer, but not sure if there is a built-in way to this?

something as

thank you

Dynamically binding countdown value

Great work. How do I dynamically bind the countdown value from data retrieved from a remote REST service and start the countdown once the data is retrieved?

Set seconds to countdown, not only add

Hi currently exist a method called "addCDSeconds" to the countdown but this only add time.

If I have a timer of 10 seconds and in some point I need to change it for example to 13 seconds . I need to get the current value and calculate it the difference and add it.

somethig like this:

var secondsToAdd =  13 -currentSeconds ;

I was thinking something like set a value directly maybe in this way :

$scope.setCountdown = $element[0].setCountdown = function (newTime) {
    $scope.countdown = newTime;
    $scope.$digest();
    if (!$scope.isRunning) {
      $scope.start();
    }
};

I made the change in my project. I set new seconds without calculate nothing. What do you think?

When I call a method 'timer-add-cd-seconds' counter starts counting.

I am forced to do so:

$scope.$on('timer-add-cd-seconds', function (){
$timeout($scope.stopTimer, 5);
});

to stop the counter.

Maybe add a second parameter to the method?
$scope.$broadcast ('timer-add-cd-seconds', 1499, true); //on true - start counter

plural time unit

Hi,

for 0 second, timer displays 0 seconds. Check it out on following plunker preview.

http://plnkr.co/edit/JsgCENsIVnCSurI7xqtU?p=preview

Can I change it. for '0' or '1' it would be display 'second' otherwise 'seconds'

Regards,

auto-start attribute name is not compatible with Angular 1.2

Due to a new feature described here angular/angular.js@e46100f, attributes that end with "-start" or "-end" will get that truncated. So auto-start gets passed to the directive as "auto".

Took me quite a bit of time to figure out what was going on (had to git bisect the angular codebase).

The simple solution would be to call the attribute "autostart", but I guess there could be other approaches to this.

Countdown timer not working.

Hi I was trying to use this directive as a countdown timer but its not working. I am using below code.

{{days}} days, {{hours}} hours, {{minutes}} minutes, {{seconds}} seconds.

Here Following is the timer clock setting for the days, hours, minutes & seconds elapsed since January 1, 2013 (GMT-6)

(01 Jan 2013 06:00:00 GMT = 1357020000000 milliseconds)

I want a countdown timer for 3 hours, so I added 180 ms into the current time stamp
eg:
var ct = new Date().getTime() + 180_60_1000;
ct = 1384205227175;

Now our code will be

{{days}} days, {{hours}} hours, {{minutes}} minutes, {{seconds}} seconds.

and the output is something like this
-3 hours, -59 minutes, -27 seconds.

Please give me some solution for this,

Legacy IE8 issues

So this directive doesn't work with IE8. I'm trying to integrate this directive with some of our legacy software. Does anyone have some suggestions for IE compatibility?

countdown - interval

Hi,

First of all I must salute you for providing this great directive. 👍

I am new to this angular and Git-Hub and learning it now. I am creating an app with countdown. during integration of timer module, I found an issue with interval. I cannot provide interval value other than 1000. So can I make this interval value to default 1000. so if interval value is wrong or not provided, it doesn't give any error.

Change "countdown" attribute from AngularJS controller?

Hi,
Is there a way to change the "countdown" attribute from the AngularJS controller?

I tried something like this:

index.html

<timer interval="1000" countdown="{{timerTime}}">{{seconds}}</timer>

controller.js

controller('WorkoutCtrl', ['$scope', function($scope) {
    $scope.timerTime = 15;
    ...
}]);

but I receive an error:
"Error: Syntax Error: Token 'timerTime' is unexpected, expecting [:] at column 3 of the expression [{{timerTime}}] starting at [timerTime}}]."

Thanks for the great Directive!

Countdown doesn't work with 0 initially.

If I initialize the countdown timer with 0, I expect it to appear and remain at 0. Instead, I get strange behavior because 0 is being translated into undefined.

parseInt($scope.countdownattr, 10) > 0 ?

should be:

parseInt($scope.countdownattr, 10) >= 0 ?

bower_components should be bower-ignored or not checked in at all

Much like node_modules, this is bloat which will get copied over every time someone installs the package but isn't actually used. The Bower homepage recommends checking in dependencies only "If you aren't authoring a package that is intended to be consumed by others."

At the very least, the bower_components directory could be added to the ignore array in bower.json, which would allow you to keep the dependencies "locked" in the repo without getting copied over to every consumer of this package.

What do you think?

Extend the scope of 'addCDSeconds' method

This timer also works very nicely as a digital clock. I really like this mod and have been using it, but would like to add a more broadly scoped add minutes and add hours method, like a normal digital clock.

When I create it, would there be interest in me opening a PR for my new extension of this nice angularjs module?

Multiple Timers Stop Events

Loving the timer so far - really simple to use. I'm having one small issue however.

I have multiple timers all being kicked off with different countdown values (essentially a list of ebay style auction items counting down) inside an ng-repeat.

I see there is a 'timer-stopped' event which is ideal as I'd like to refresh the item on this event, however I can't seem to find a way for the event to tell me which timer has expired.

Is there a way of doing this? Neither the "data" or "event" arguments seem to have a timerId or equivalent, and I can't see this being used in any of your examples.

Thanks in advance.

Prevent auto-start or read values from scope

Hi all, thanks for a great directive. I'm sorry for creating an issue here, but I didn't see any better way to reach out to you. I have two issues trying to implement the timer in one of my apps.

1. I can not prevent autostart
   As far as I can tell from the code, you are immediately starting the timer. Why? I can not have a timer sit there with 00:00:00 and wait for a user to start it?
2. I can not read values from the scope
   Why does the timer have a separate scope? This may have reusability reasons, but: How can I get the hours/minutes/seconds without listening to the tick event all the time (overhead). I just want to read the value, e.g. on stop.

Thanks a lot in advance.

Cannot stop timer after $broadcast 'timer-add-cd-seconds'

When I add seconds to the timer:

$scope.$broadcast 'timer-add-cd-seconds', ellapsedSeconds

and immediately attempt to stop it:

$scope.$broadcast 'timer-clear'

it seizes to do so. Timer continues ticking even after timer-clear event is triggered.

Not able to update timer value inside ajax success response block.

Hi, I want to put the timer value from my db, so that's why I am making a ajax call and the response will replace the value of the timer. but its not working, here is my code:

<timer start-time="startTime" interval="100" countdown="students.countdown"> <strong>{{hours}} hours, {{minutes}} minutes, {{seconds}} second</strong> </timer>

dashboardFactory.getTimerTime().then(function(response) { $scope.startTime = response.time; });

$scope.$broadcast("timer-add-time") error

I get these errors:

$scope.addSeconds is undefined

Changing it to $scope.addCDSeconds gives

$apply already in progress

This the right way to add seconds to a countdown?

Timer breaks in angular 1.2.0

Hello!

Today i've updated my angular version to 1.2.0 and I notice that the timer directive is not working in the template.

Everything works fine in the directive, but the values are no updating int he html binds.

I already try some solutions and changes, but nothing that works.

Plunker in angular 1.2.0
http://plnkr.co/edit/YSpnUh1AbTR3EM2jh2pj?p=preview

Plunker in angular 1.2.0-rc3 (Working)
http://plnkr.co/edit/R3AyG6njAUVmoJeydU49?p=preview

Starting from

Hi,

Does a "start from" millis is currently supported?

I'd like to use your component as a "time tracking" so I need a way to start, stop, resume (all good) but also start from a predefined value coming from a DB (eg. 5 minutes 34 seconds).

Thanks,

Manu

Reset Countdown

Great directive. Thank you. I'm new to this, so please don't hesitate to right a wrong.

On countdown, I was looking for a reset function. So I added:

$scope.$on('timer-reset', function () {
  $scope.reset();
});

Then

$scope.reset = $element[0].reset = function () {
  $scope.startTime = $scope.startTimeAttr ? new Date($scope.startTimeAttr) : new Date();
  $scope.endTime = $scope.endTimeAttr ? new Date($scope.endTimeAttr) : null;
  $scope.countdown = $scope.countdownattr && parseInt($scope.countdownattr, 10) > 0 ? parseInt($scope.countdownattr, 10) : undefined;
  resetTimeout();
  tick();
  $scope.isRunning = false;
  $scope.clear();
}

Basically I combined 'timer-start' and 'timer-stop'. Thoughts?

countdown attribute should update

The countdown attribute has two-way binding yet it never updates from within the directive. It is very useful to get the value of the current countdown so that we may be able to print its value somewhere other than inside the directive easily.

Bower downloading entire project

When I use Bower to install angular-timer it downloads over 36MB of data because it's including the entire project and its dependencies.

There was discussion about this in #10 but it doesn't seem to have been resolved.

Templates doesn't work with angular 1.2.0

This example:

{{hours}} hours, {{minutes}} minutes, {{seconds}} seconds.

renders into:

hours, minutes, seconds.

Wierd mobile chrome timer issue (new timer not starting)

I'm making a simple web app for mobile devices that allows you to add timers with names and work types and then count how much time you spent on it. I'm trying to use with start-time attr to show user how much time passed since specific timer started:

<div class="timers list" ng-controller="TimersCtrl">
    <ul>
        <li ng-repeat="timer in timers">
            <span>{{timer.projectName}}</span>
            <span>({{timer.workType}})</span>
            <timer start-time="timer.start">{{millis | date: "hh:mm:ss"}}</timer>
            <span class="stop-timer button" ng-click="stopTimer(timer)">Stop</span>
        </li>
    </ul>
</div>

And the controller code:

timeboard.controller("TimersCtrl", ["$scope", "$http", "$rootScope", function($scope, $http, $rootScope) {
    $scope.updateTimers = function(){
        $http({method:"GET", url:"/api/v1/timers"}).success(function(data, status, headers, config) {
            $rootScope.timers = data;
        });
    };

    $scope.stopTimer = function(timer){
        $http({method:"DELETE", url:("/api/v1/timers/" + timer._id)}).success(function(data, status, headers, config) {
            $rootScope.timers = data;
        });
    };

    $scope.updateTimers();
});

This controller only loads timers on page load and allows you to stop the timer

Timers are added from the other controller:

timeboard.controller("ProjectsCtrl", ["$scope", "$http", "$rootScope", "$timeout", function($scope, $http, $rootScope, $timeout) {
// some irrelevant code
    $scope.startTimer = function(project){
        $http({method:"POST", url: "/api/v1/timers", data: { PID: project._id, PName: project.name, worktype: project.workName } }).success(function(data, status, headers, config) {
            project.usage = project.usage + 1;
            $scope.updateWorkTypes();
            $rootScope.timers = data;
        }); 
    };
// some irrelevant code
});

So the problem is that when I add new timer, it doesn't start to count time automatically, and this happens only in Chrome for Mobile (Desktop Chrome and its mobile emulation works fine), when I then refresh page or delete other timer or add a new one (this causes $rootScope timers to update with $http req) this one, that wasn't counting before, starts to count time

I'm sorry if i'm missing something very simple here, but please, let me know, if it isn't supposed to happen

EDIT: and of course let me know if you need some additional info