A timer directive for angularjs. angular-timer is a great module, but it is missing some pieces I needed and can be resource intensive. In this module, you can name timers and have many directives listen on the same timer.
To install in your app, simply run:
bower install angular-chrono
To use in your angular app, add "angular-chrono" to your dependencies:
var myApp = angular.module('myApp', ['angular-chrono']);
Then, you can add "chrono-timer" directive inside your html. A "zeropad" filter has been added for convenience to left pad hours/minutes/seconds with zeroes, for a cleaner look.
<div chrono-timer timer-name="myTimer" start-time="time">
{{ totalDays }} days<br />
{{ hours }} hours<br />
{{ minutes|zeropad }} minutes<br />
{{ seconds|zeropad }} seconds
</div>
Finally, you can start/stop the timer inside your controller(s).
myApp.controller('MyCtrl', function MyCtrl($scope, chronoService) {
$scope.time = Date.now();
chronoService.addTimer('myTimer', { interval: 500 });
chronoService.start();
});
The available scope vars inside the directive are as follows:
- seconds: relative number of seconds (0-59) that have passed
- totalSeconds: total number of seconds passed (i.e. 336)
- minutes: relative number of minutes (0-59) that have passed
- totalMinutes: total number of minutes passed
- hours: relative number of hours (0-23) that have passed
- totalHours: total number of hours passed
- totalDays: total number of days passed
The options passed into the second param object for addTimer are:
- interval: default is 1000 milliseconds
- resetOnStop: reset counter to zero when it stops
See examples/index.html for an example usage. Other examples may be included as necessary.