Javascript 如何在angular指令中将值传递给模板？

我找到了这个倒计时的代码，并对它做了一些调整

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

angular.module（'app'）。指令（'countdown'[
'Util'，'$interval'，函数（Util，$interval）{
返回{
限制：“A”，
范围：{
日期：'@'
},
链接：功能（范围、元素）{
var期货；
未来=新日期（范围日期）；
$interval（函数（）{
var-diff；
diff=Math.floor（（future.getTime（）-newdate（）.getTime（））/1000）；
var d=使用的dhms（差异）；
var el=”“+d[0]+“天”+d[1]+“小时”+d[2]+“分钟”+d[3]+“秒”；
返回元素。替换为（el）；
}, 1000);
}
};
}
]).factory（'Util'[
函数（）{
返回{
dhms：功能（t）{
var天、小时、分钟、秒；
天数=数学下限（t/86400）；
t-=天数*86400；
小时=数学楼层（t/3600）%24；
t-=小时*3600；
分钟=数学地板（t/60）%60；
t-=分钟*60；
秒=t%60；
返回[天、小时、分钟、秒]；
}
};
}
]);

基本上，我想要做的就是将天、小时、分钟和秒放在这个模板中：

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

{{days}
天
{{hours}
小时
{{分钟}
会议记录
{{秒}
秒

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

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

---

它正在显示模板，但计时器未移动。这可能是什么原因造成的？请帮忙。谢谢。

@

用于单向数据绑定。这意味着，如果更改控制器/指令中的值，视图将不会更新

使用

=

进行双向数据绑定，并在视图上反映更改

scope: {
    date: '='
},

---

好吧，我知道我是新手。只是通过尝试才发现

return element.html(el);

而不是

return element.replaceWith(el);

---

现在它可以工作了。

你能详细说明一下吗？事实证明，我刚刚用element.html（）替换了element.replaceWith（），但现在它工作得很好。我尝试了一些东西，包括你的建议，最后得出了结论。很高兴你找到了解决方案：）