如何在角度指令中將值傳遞給模板？

Question

我已經找到了倒計時計時器的代碼，並對其進行了一些調整。

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];
            }
        };
    }
]);

基本上我想做的就是在此模板中放入天，小時，分鍾和秒：

<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>

使用指令，我將其放置如下：

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

它正在顯示模板，但計時器未移動。 是什么原因造成的？ 請幫忙。 謝謝。

Answer 1

好吧，我知道我是新手。 只是通過嘗試發現了

return element.html(el);

代替

return element.replaceWith(el);

現在可以了。

Answer 2

@是單向數據綁定。 這意味着，如果您更改控制器/指令中的值，則不會更新視圖。

使用=進行雙向數據綁定，並在視圖上反映更改。

scope: {
    date: '='
},