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.
This simple directive <timer /> will start the timer with the default option of
ticking every 1 millisecond
This will start a timer with 1410914940000 milliseconds and stopped
This markup <timer interval="1000">{{hours}} hour{{hoursS}}, {{minutes}}
minute{{minutesS}}, {{seconds}} second{{secondsS}}.</timer> will run the clock timer ticking every second
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.
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
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>
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>
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>
<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>
The countdown timer <timer interval="1000" countdown="100">{{countdown}}</timer>
will start its countdown from 100 until it reaches 0 by ticking every second
Click on the start button to start the timer. <timer autostart="false" interval="1000">{{seconds}}</timer>
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>
<timer autostart="false" countdown="190061">{{days}} day{{daysS}}, {{hours}} hour{{hoursS}}, {{minutes}} minute{{minutesS}}, {{seconds}} second{{secondsS}}.</timer>
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
countdown Time with max time unit option - minute
countdown Time with max time unit option - second
countdown Time without max time unit option - minute
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>
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>
| 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. |
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 |
| 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. |
bower install angular-timer
We welcome any or all kinds of contributions! Please submit pull requests or create issues to contribute to this project :)