Introduction

Directives in AngularJS is a powerful way of building reusable UI components. This simple project will serve as a sample/reference implementation demonstrating its flexibilities by making it inter-operable across runtime (AngularJS, plain simple JavaScript & jQuery)

For basic understanding of how directives work in AngularJS, please head to this developer guide.

Basic Example

This simple directive <timer /> will start the timer with the default option of ticking every 1 millisecond

Timer with start time and auto start set

This will start a timer with 1410914940000 milliseconds and stopped

Timer with hours, minutes & seconds

This markup <timer interval="1000">{{hours}} hour{{hoursS}}, {{minutes}} minute{{minutesS}}, {{seconds}} second{{secondsS}}.</timer> will run the clock timer ticking every second

{{hours}} hour{{hoursS}}, {{minutes}} minute{{minutesS}}, {{seconds}} second{{secondsS}}.

Timer i18n

This markup <timer interval="1000" language="fr" >{{yearUnit}} will run the clock timer ticking every second.

You can use a controller variable as the language attribut or a string. If a scope variable is used, the value will be watched, that is to say if your app language changes, the change will also affects the timer.

Based on HumanizeDuration with more than 16 languages available.

Spanish

Year max unit time : {{yearUnit}}

Hour max unit time: {{hourUnit}}

Second max unit time: {{secondUnit}}

French

Year max unit time : {{yearUnit}}

Hour max unit time: {{hourUnit}}

Second max unit time: {{secondUnit}}

Available units

  • secondUnit: 8 164 816 seconds
  • minuteUnit: 136 089 minutes, 16 seconds
  • hourUnit: 18 126 hours,9 minutes, 16 seconds
  • dayUnit: 755 days, 6 hours, 9 minutes, 16 seconds
  • monthUnit: 25 month, 5 days, 6 hours, 9 minutes, 16 seconds
  • yearUnit : 2 years, 1 month, 5 days, 6 hours, 9 minutes, 16 seconds

Timer with leading zero

This markup <timer interval="1000">{{hhours}} hour{{hhoursS}}, {{mminutes}} minute{{minutesS}}, {{sseconds}} second{{secondsS}}.</timer> will run the clock timer ticking every second with an additional zero at the beginning if unit is smaller than 10

{{hhours}} hour{{hoursS}}, {{mminutes}} minute{{minutesS}}, {{sseconds}} second{{secondsS}}

Timer initialised with some predefined start time.

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

(01 Jan {{currentYear}} 06:00:00 GMT = {{startTime}} milliseconds)

<timer start-time="{{startTime}}">{{days}} days, {{hours}} hours, {{minutes}} minutes, {{seconds}} seconds.</timer>

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

Timer initialised with some predefined end time.

Following is the countdown timer setting for the days, hours, minutes & seconds to January 1, {{endYear}} (GMT)

(01 Jan {{endYear}} 00:00:00 GMT = {{endTime}} milliseconds)

<timer end-time="{{endTime}}">{{days}} days, {{hours}} hours, {{minutes}} minutes, {{seconds}} seconds.</timer>

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

Progressbar Timer

Timer directive along with Twitter Bootstrap's Progressbar will set the timer on Progressbar control.

<timer countdown="30" interval="1000"><div class="progress progress-striped active {{displayProgressActive}}"style="height: 30px;"> Remaining time : {{countdown}} second{{secondsS}} ({{progressBar}}%). Activity? {{displayProgressActive}} <div class="bar" style="min-width: 2em;width: {{progressBar}}%;"></div> </div></timer>

Remaining time : {{countdown}} second{{secondsS}} ({{progressBar}}%). Activity? {{displayProgressActive}}
{{ progressBar }}%

<timer end-time="1451628000000" interval="1000"><div class="progress progress-striped active {{displayProgressActive}}"style="height: 30px;"> <div class="bar" style="min-width: 2em;width: {{progressBar}}%;"></div> </div></timer>

({{progressBar}}%). Progress bar activity : {{displayProgressActive}}
{{ progressBar }}%

Countdown Timer

The countdown timer <timer interval="1000" countdown="100">{{countdown}}</timer> will start its countdown from 100 until it reaches 0 by ticking every second

{{countdown}}

Timer with autostart = false

Click on the start button to start the timer. <timer autostart="false" interval="1000">{{seconds}}</timer>

{{seconds}}

Plural / Singular units

Two stopped countdown timers to illustrate how to handle pluralization of time units. <timer autostart="false" countdown="90061">{{days}} day{{daysS}}, {{hours}} hour{{hoursS}}, {{minutes}} minute{{minutesS}}, {{seconds}} second{{secondsS}}.</timer>

{{days}} day{{daysS}}, {{hours}} hour{{hoursS}}, {{minutes}} minute{{minutesS}}, {{seconds}} second{{secondsS}}.

<timer autostart="false" countdown="190061">{{days}} day{{daysS}}, {{hours}} hour{{hoursS}}, {{minutes}} minute{{minutesS}}, {{seconds}} second{{secondsS}}.</timer>

{{days}} day{{daysS}}, {{hours}} hour{{hoursS}}, {{minutes}} minute{{minutesS}}, {{seconds}} second{{secondsS}}.

Countdown time display according to specified max-time-unit

This markup will display countdown time in minute and seconds only. This attribute can be applied to regular clock timer as well. <timer countdown="10041" max-time-unit="'minute'" interval="1000">{{mminutes}} minute{{minutesS}}, {{sseconds}} second{{secondsS}}</timer>

countdown Time with max time unit option - year

{{yyears}} year{{yearsS}}, {{mmonths}} month{{monthsS}}, {{ddays}} day{{daysS}}, {{hhours}} hour{{hoursS}}, {{mminutes}} minute{{minutesS}}, {{sseconds}} second{{secondsS}}

countdown Time with max time unit option - minute

{{mminutes}} minute{{minutesS}}, {{sseconds}} second{{secondsS}}

countdown Time with max time unit option - second

{{mminutes}} minute{{minutesS}}, {{sseconds}} second{{secondsS}}

countdown Time without max time unit option - minute

{{ddays}} day{{daysS}}, {{hhours}} hour{{hoursS}}, {{mminutes}} minute{{minutesS}}, {{sseconds}} second{{secondsS}}

Countdown Finished Callback

A countdown timer that updates a value once the callback is reached <timer countdown="3" interval="1000" finish-callback="callbackTimer.finished()">{{seconds}} second{{secondsS}}</timer>

{{seconds}} second{{secondsS}}

Timer: {{callbackTimer.status}} Callbacks: {{callbackTimer.callbackCount}}

Markup

Timer directive can be declared using following options. By default, it will display milliseconds inside span tag. It can also take template string to display user-defined formats.

<timer interval="1000" />

<timer interval="1000">{{hours}} hours, {{minutes}} minutes, {{seconds}} seconds, {{millis}} milliseconds.</timer>

Attributes

Name Required Default value
interval false 1 millisecond
autostart
Formerly called 'auto-start'. Please see this issue 		false true
countdown false  
start-time false starts the timer with predefined time (in milliseconds).
end-time false Sets the countdown based on predefined end time (in milliseconds).
max-time-unit false no default value. But you can give value, 'minute', 'second', or 'hour'.
language false 'en' for English. Please see supported languages.

Methods

Following DOM methods can be invoked to timer. Append to timer- for scope based events when calling from AngularJS controllers.

Method name Description
start Starts the timer
stop Stops the timer
clear Same as stop. But, without the event being triggered
resume Resumes the timer. Will NOT reset the start time
addCDSeconds Add seconds to running countdown

Events

Event name Description
timer-tick Tick event that gets emitted for every timer tick for specified interval. Please refer to Polling Timer example for its usage.
timer-stopped Tick event that gets emitted when the timer stops. Please refer to Single Timer example for its usage.

Install using Bower

bower install angular-timer

Contributions welcome!

We welcome any or all kinds of contributions! Please submit pull requests or create issues to contribute to this project :)