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 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 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"/>
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}}
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). |
Methods
Following DOM methods can be invoked to timer. Prepend 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 :)