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}} hours, {{minutes}}
minutes, {{seconds}} seconds.</timer>
will run the clock timer ticking every second
{{hours}} hours, {{minutes}} minutes, {{seconds}} seconds.
Timer with leading zero
This markup <timer interval="1000">{{hhours}} hours, {{mminutes}}
minutes, {{sseconds}} seconds.</timer>
will run the clock timer ticking every second with an additional zero at the beginning if unit is smaller than 10
{{hhours}} hours, {{mminutes}} minutes, {{sseconds}} seconds.
Timer initialised with some predefined start time.
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)
<timer start-time="1357020000000">{{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, 2015 (GMT-6)
(01 Jan 2015 06:00:00 GMT = 1420070400000 milliseconds)
<timer end-time="1420070400000">{{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 interval="1000"><div class="progress
progress-striped active"> <div class="bar" style="width: {{seconds}}%;"></div>
</div></timer>
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'. |
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 :)