Countdown com intervalo e template em Angular JS
by Ivan Ferrer
HTML
<script src="https://code.angularjs.org/1.4.5/angular.min.js"></script>
<div ng-app="iCountdown">
<i-countdown set-start-date="2015-11-13 10:58:00" set-end-date="2015-11-13 21:10:00" format-view="%d dias %h hs %i min %s sg" expire-message="Fim de jogo" start-message="Aguarde o início" considered-current-date="true" set-template-view="<div id='elemento'>%t</div>"></i-countdown>
</div>
JavaScript
angular.module('iCountdown', [])
.directive("iCountdown", function () {
return {
restrict: "EAC",
scope: {
setStartDate: "@",
setEndDate: "@",
expireMessage: "@",
startMessage: "@",
formatView: "@",
setTemplateView: "@",
consideredCurrentDate: "@",
},
replace: true,
template: "<div><div></div></div>",
link: function (scope, element) {
var insertDate = function() {
scope.setMessageExpired(scope.expireMessage);
scope.setMessageInitial(scope.startMessage);
if (angular.isDefined(scope.setStartDate) && angular.isDefined(scope.setEndDate)) {
params.dateStart = scope.setStartDate;
params.dateEnd = scope.setEndDate;
if (angular.isDefined(scope.setTemplateView)) {
params.templateView = scope.setTemplateView;
params.activeCurrentDate = scope.consideredCurrentDate;
}
}
scope.start();
};
scope.$watch('setDateEnd', function() {
insertDate();
}, true);
var _end = new Date();
var _start = new Date();
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var params = {
second:_second,
minute:_minute,
hour: _hour,
day: _day,
interval: null,
messageFinal: 'expired!',
messageInitial: 'please whait...',
format:'Y-m-d H:i:s',
...