Directive code :
app.directive('clock', ['dateFilter', '$timeout', function (dateFilter, $timeout) {
return {
restrict: 'E',
scope: {
format: '@',
},
link: function (scope, element, attrs) {
var updateTime = function () {
//GET UTC DATE TIME BY USING MOMENT JS
var now = moment(new Date()).utc().format('YYYY-MM-DD HH:mm:ss')
//CREATED AT DATE TIME
var then = attrs.time;
//GET DIFFERENCT BETWEEN CURRENT UTC DATE TIME AND CREATED AT DATE TIME
var ms = moment(now, "YYYY-MM-DD HH:mm:ss").diff(moment(then, "YYYY-MM-DD HH:mm:ss"));
var d1 = moment.duration(ms);
var curr_now = Math.floor(d1.asHours()) + moment.utc(ms).format(":mm:ss");
element.html(dateFilter(curr_now, scope.format));
$timeout(updateTime, curr_now % 1000);
};
updateTime();
}
};
}]);
HTML Code :
<clock time="{{data.create_datetime}}" format="HH:mm:ss"></clock>
It’s a good content for angular clock.
Thanks,
Milan