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: '='
},

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

2 个答案: