var app = angular.module('myApp', ['timer']);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World 2';
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.2.22" src="https://code.angularjs.org/1.2.22/angular.js" data-require="angular.js@1.2.x"></script>
<script src="angular-timer.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="myApp" ng-controller="MainCtrl">
<div>
<p><strong>In 1.1.6 this was counting down from end-time to start-time, now it doesnt:</strong></p>
<timer start-time="1416576793761" end-time="1426586793761">{{hours}} hours, {{minutes}} minutes, {{seconds}} seconds</timer>
</div>
</body>
</html>
/* Put your css in here */
/**
* angular-timer - v1.1.8 - 2014-10-24 3:55 PM
* https://github.com/siddii/angular-timer
*
* Copyright (c) 2014 Siddique Hameed
* Licensed MIT <https://github.com/siddii/angular-timer/blob/master/LICENSE.txt>
*/
var timerModule = angular.module('timer', [])
.directive('timer', ['$compile', function ($compile) {
return {
restrict: 'EAC',
replace: false,
scope: {
interval: '=interval',
startTimeAttr: '=startTime',
endTimeAttr: '=endTime',
countdownattr: '=countdown',
finishCallback: '&finishCallback',
autoStart: '&autoStart',
maxTimeUnit: '='
},
controller: ['$scope', '$element', '$attrs', '$timeout', function ($scope, $element, $attrs, $timeout) {
// Checking for trim function since IE8 doesn't have it
// If not a function, create tirm with RegEx to mimic native trim
if (typeof String.prototype.trim !== 'function') {
String.prototype.trim = function () {
return this.replace(/^\s+|\s+$/g, '');
};
}
//angular 1.2 doesn't support attributes ending in "-start", so we're
//supporting both "autostart" and "auto-start" as a solution for
//backward and forward compatibility.
$scope.autoStart = $attrs.autoStart || $attrs.autostart;
if ($element.html().trim().length === 0) {
$element.append($compile('<span>{{millis}}</span>')($scope));
} else {
$element.append($compile($element.contents())($scope));
}
$scope.startTime = null;
$scope.endTime = null;
$scope.timeoutId = null;
$scope.countdown = $scope.countdownattr && parseInt($scope.countdownattr, 10) >= 0 ? parseInt($scope.countdownattr, 10) : undefined;
$scope.isRunning = false;
$scope.$on('timer-start', function () {
$scope.start();
});
$scope.$on('timer-resume', function () {
$scope.resume();
});
$scope.$on('timer-stop', function () {
$scope.stop();
});
$scope.$on('timer-clear', function () {
$scope.clear();
});
$scope.$on('timer-set-countdown', function (e, countdown) {
$scope.countdown = countdown;
});
function resetTimeout() {
if ($scope.timeoutId) {
clearTimeout($scope.timeoutId);
}
}
$scope.start = $element[0].start = function () {
$scope.startTime = $scope.startTimeAttr ? new Date($scope.startTimeAttr) : new Date();
$scope.endTime = $scope.endTimeAttr ? new Date($scope.endTimeAttr) : null;
if (!$scope.countdown) {
$scope.countdown = $scope.countdownattr && parseInt($scope.countdownattr, 10) > 0 ? parseInt($scope.countdownattr, 10) : undefined;
}
resetTimeout();
tick();
$scope.isRunning = true;
};
$scope.resume = $element[0].resume = function () {
resetTimeout();
if ($scope.countdownattr) {
$scope.countdown += 1;
}
$scope.startTime = new Date() - ($scope.stoppedTime - $scope.startTime);
tick();
$scope.isRunning = true;
};
$scope.stop = $scope.pause = $element[0].stop = $element[0].pause = function () {
var timeoutId = $scope.timeoutId;
$scope.clear();
$scope.$emit('timer-stopped', {timeoutId: timeoutId, millis: $scope.millis, seconds: $scope.seconds, minutes: $scope.minutes, hours: $scope.hours, days: $scope.days});
};
$scope.clear = $element[0].clear = function () {
// same as stop but without the event being triggered
$scope.stoppedTime = new Date();
resetTimeout();
$scope.timeoutId = null;
$scope.isRunning = false;
};
$element.bind('$destroy', function () {
resetTimeout();
$scope.isRunning = false;
});
function calculateTimeUnits() {
if ($attrs.startTime !== undefined){
$scope.millis = new Date() - new Date($scope.startTimeAttr);
}
// compute time values based on maxTimeUnit specification
if (!$scope.maxTimeUnit || $scope.maxTimeUnit === 'day') {
$scope.seconds = Math.floor(($scope.millis / 1000) % 60);
$scope.minutes = Math.floor((($scope.millis / (60000)) % 60));
$scope.hours = Math.floor((($scope.millis / (3600000)) % 24));
$scope.days = Math.floor((($scope.millis / (3600000)) / 24));
$scope.months = 0;
$scope.years = 0;
} else if ($scope.maxTimeUnit === 'second') {
$scope.seconds = Math.floor($scope.millis / 1000);
$scope.minutes = 0;
$scope.hours = 0;
$scope.days = 0;
$scope.months = 0;
$scope.years = 0;
} else if ($scope.maxTimeUnit === 'minute') {
$scope.seconds = Math.floor(($scope.millis / 1000) % 60);
$scope.minutes = Math.floor($scope.millis / 60000);
$scope.hours = 0;
$scope.days = 0;
$scope.months = 0;
$scope.years = 0;
} else if ($scope.maxTimeUnit === 'hour') {
$scope.seconds = Math.floor(($scope.millis / 1000) % 60);
$scope.minutes = Math.floor((($scope.millis / (60000)) % 60));
$scope.hours = Math.floor($scope.millis / 3600000);
$scope.days = 0;
$scope.months = 0;
$scope.years = 0;
} else if ($scope.maxTimeUnit === 'month') {
$scope.seconds = Math.floor(($scope.millis / 1000) % 60);
$scope.minutes = Math.floor((($scope.millis / (60000)) % 60));
$scope.hours = Math.floor((($scope.millis / (3600000)) % 24));
$scope.days = Math.floor((($scope.millis / (3600000)) / 24) % 30);
$scope.months = Math.floor((($scope.millis / (3600000)) / 24) / 30);
$scope.years = 0;
} else if ($scope.maxTimeUnit === 'year') {
$scope.seconds = Math.floor(($scope.millis / 1000) % 60);
$scope.minutes = Math.floor((($scope.millis / (60000)) % 60));
$scope.hours = Math.floor((($scope.millis / (3600000)) % 24));
$scope.days = Math.floor((($scope.millis / (3600000)) / 24) % 30);
$scope.months = Math.floor((($scope.millis / (3600000)) / 24 / 30) % 12);
$scope.years = Math.floor(($scope.millis / (3600000)) / 24 / 365);
}
// plural - singular unit decision
$scope.secondsS = ($scope.seconds === 1 || $scope.seconds === 0) ? '' : 's';
$scope.minutesS = ($scope.minutes === 1 || $scope.minutes === 0) ? '' : 's';
$scope.hoursS = ($scope.hours === 1 || $scope.hours === 0) ? '' : 's';
$scope.daysS = ($scope.days === 1 || $scope.days === 0)? '' : 's';
$scope.monthsS = ($scope.months === 1 || $scope.months === 0)? '' : 's';
$scope.yearsS = ($scope.years === 1 || $scope.years === 0)? '' : 's';
//add leading zero if number is smaller than 10
$scope.sseconds = $scope.seconds < 10 ? '0' + $scope.seconds : $scope.seconds;
$scope.mminutes = $scope.minutes < 10 ? '0' + $scope.minutes : $scope.minutes;
$scope.hhours = $scope.hours < 10 ? '0' + $scope.hours : $scope.hours;
$scope.ddays = $scope.days < 10 ? '0' + $scope.days : $scope.days;
$scope.mmonths = $scope.months < 10 ? '0' + $scope.months : $scope.months;
$scope.yyears = $scope.years < 10 ? '0' + $scope.years : $scope.years;
}
//determine initial values of time units and add AddSeconds functionality
if ($scope.countdownattr) {
$scope.millis = $scope.countdownattr * 1000;
$scope.addCDSeconds = $element[0].addCDSeconds = function (extraSeconds) {
$scope.countdown += extraSeconds;
$scope.$digest();
if (!$scope.isRunning) {
$scope.start();
}
};
$scope.$on('timer-add-cd-seconds', function (e, extraSeconds) {
$timeout(function () {
$scope.addCDSeconds(extraSeconds);
});
});
$scope.$on('timer-set-countdown-seconds', function (e, countdownSeconds) {
if (!$scope.isRunning) {
$scope.clear();
}
$scope.countdown = countdownSeconds;
$scope.millis = countdownSeconds * 1000;
calculateTimeUnits();
});
} else {
$scope.millis = 0;
}
calculateTimeUnits();
var tick = function () {
$scope.millis = new Date() - $scope.startTime;
var adjustment = $scope.millis % 1000;
if ($scope.endTimeAttr) {
$scope.millis = $scope.endTime - new Date();
adjustment = $scope.interval - $scope.millis % 1000;
}
if ($scope.countdownattr) {
$scope.millis = $scope.countdown * 1000;
}
if ($scope.millis < 0) {
$scope.stop();
$scope.millis = 0;
calculateTimeUnits();
if($scope.finishCallback) {
$scope.$eval($scope.finishCallback);
}
return;
}
calculateTimeUnits();
//We are not using $timeout for a reason. Please read here - https://github.com/siddii/angular-timer/pull/5
$scope.timeoutId = setTimeout(function () {
tick();
$scope.$digest();
}, $scope.interval - adjustment);
$scope.$emit('timer-tick', {timeoutId: $scope.timeoutId, millis: $scope.millis});
if ($scope.countdown > 0) {
$scope.countdown--;
}
else if ($scope.countdown <= 0) {
$scope.stop();
if($scope.finishCallback) {
$scope.$eval($scope.finishCallback);
}
}
};
if ($scope.autoStart === undefined || $scope.autoStart === true) {
$scope.start();
}
}]
};
}]);
/* commonjs package manager support (eg componentjs) */
if (typeof module !== "undefined" && typeof exports !== "undefined" && module.exports === exports){
module.exports = timerModule;
}