How to pass values to template in angular directive?

Question

I have found this code for a countdown timer and tweaked it a little.

angular.module('app').directive('countdown', [
    'Util', '$interval', function (Util, $interval) {
        return {
            restrict: 'A',
            scope: {
                date: '@'
            },
            link: function (scope, element) {
                var future;
                future = new Date(scope.date);
                $interval(function () {
                    var diff;
                    diff = Math.floor((future.getTime() - new Date().getTime()) / 1000);

                    var d = Util.dhms(diff);
                    var el = "<div class='time_division_container'><div class='digits_container'>"+d[0]+"</div><div class='label_container'>DAYS</div></div><div class='time_division_container'><div class='digits_container'>"+d[1]+"</div><div class='label_container'>HOURS</div></div><div class='time_division_container'><div class='digits_container'>"+d[2]+"</div><div class='label_container'>MINUTES</div></div><div class='time_division_container'><div class='digits_container'>"+d[3]+"</div><div class='label_container'>SECONDS</div></div>";

                    return element.replaceWith(el);
                }, 1000);
            }
        };
    }
]).factory('Util', [
    function () {
        return {
            dhms: function (t) {
                var days, hours, minutes, seconds;
                days = Math.floor(t / 86400);
                t -= days * 86400;
                hours = Math.floor(t / 3600) % 24;
                t -= hours * 3600;
                minutes = Math.floor(t / 60) % 60;
                t -= minutes * 60;
                seconds = t % 60;
                return [days, hours, minutes, seconds];
            }
        };
    }
]);

Basically all I wanted to happen is to put the days, hours, minutes and seconds in this template:

<div class='time_division_container'>
    <div class='digits_container'>{{ days }}</div>
    <div class='label_container'>DAYS</div>
</div>
<div class='time_division_container'>
    <div class='digits_container'>{{ hours }}</div>
    <div class='label_container'>HOURS</div>
</div>
<div class='time_division_container'>
    <div class='digits_container'>{{ minutes }}</div>
    <div class='label_container'>MINUTES</div>
</div>
<div class='time_division_container'>
    <div class='digits_container'>{{ seconds }}</div>
    <div class='label_container'>SECONDS</div>
</div>

Using the directive I placed it like this:

<div countdown='' date='January 1, 2018 12:00:00'>&nbsp;</div>

It was displaying the template but the timer is not moving. What could be causing this? Please help. Thanks.

Answer 1

Alright, I know I am new to angular. Just found out by trying

return element.html(el);

instead of

return element.replaceWith(el);

and now it works.

Answer 2

@ is for a one-way databinding. This means that if you change your value in your controller/directive, the view won't be updated.

Use = for a two-way databinding and reflect changes on view.

scope: {
    date: '='
},