I am working on creating a countdown timer using directives and want to add some CSS styles like fade-out when the time is changing. My issue lies in the HTML binding where the time is not updating visually, although it does change in the console.
Here's my HTML:
<body ng-app="myApp" ng-controller="myCtrl">
<count-down-timer count-down-time=5000></count-down-timer>
{{userCountDownTime}}
</body>
And here is my JS code:
app.directive('countDownTimer', function () {
return {
restrict: 'E',
replace: true,
link: function (scope, elem, attr) {
scope.userCountDownTime = attr.countDownTime;
initiate();
function initiate() {
console.log("initiated")
var myVar = setInterval(decrement, 1000);
};
function decrement() {
console.log("decrement");
scope.userCountDownTime--;
console.log(scope.userCountDownTime);
return;
}
}
}});