如何多次使用指令

Question

基本上我是从另一个来源复制这段代码的，这是一个倒数计时器。

指令

app.directive('countdown', [
    'Util', '$interval', function (Util, $interval) {
        return {
            restrict: 'E',
            scope: {
                date: '@'
            },
            templateUrl: 'countdown_timer.html',
            link: function (scope, element) {
                var future = new Date(scope.date);

                var stop;

                stop = $interval(function () {
                    var diff;
                    diff = Math.floor((future.getTime() - new Date().getTime()) / 1000);

                    if (parseInt(diff) <= 0) {
                        stopTimer();
                        scope.days = 0;
                        scope.hours = 0;
                        scope.minutes = 0;
                        scope.seconds = 0;
                    } else {
                        var d = Util.dhms(diff);
                        scope.days = d[0];
                        scope.hours = d[1];
                        scope.minutes = d[2];
                        scope.seconds = d[3];
                    }
                }, 1000);

                stopTimer = function () {
                    console.log("Should Stop");
                    $interval.cancel(stop);
                };
            }
        };
    }
]).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];
            }
        };
    }
]);

HTML

<div class="col-xs-12" ng-repeat="event in events">
    <countdown date="{{ event.event_date }}"></countdown>
</div>

模板

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

如果倒计时只有 1，一开始效果很好。但是当我在事件对象中添加多个 event_date 时，

$interval.cancel(stop);

似乎不起作用。

例如，如果我有这些事件日期

var events = {
    {"event_date" : "2017-11-30 12:00:00"},
    {"event_date" : "2017-11-01 09:00:00"}
};

第一个日期工作正常，但已经过去的第二个日期没有停止倒计时。如果您查看控制台日志，它仍然会多次显示 "Should Stop"。它应该只显示一次，因为我做了 if 语句，当当前时间和事件日期的差异为 0 或负数时调用 "stopTimer" 函数。

请帮忙。非常感谢。

Answer 1

您遇到了范围界定问题。 stopTimer 被定义为一个全局变量，每次指令实例化它都会覆盖以前的定义。因此，当您从第一个指令调用 stopTimer 时，它会调用第二个指令中定义的 stopTimer，后者的 stop 变量指向其他内容。另外，您的问题可能有错字，但 events 应该是 ng-repeat 才能工作的数组。

如果你改变：

  stopTimer = function () {
    console.log("Should Stop");
    $interval.cancel(stop);
  };

到

  var stopTimer = function () {
    console.log("Should Stop");
    $interval.cancel(stop);
  };

它工作正常，因为 stopTimer 现在是范围内的。请参阅随附的 plunkr：https://plnkr.co/edit/41DlPAP07iBtmAq3kKbR

此外，启用 strict 模式以避免此类范围界定问题很有用。参见 What does "use strict" do in JavaScript, and what is the reasoning behind it?。如果启用了严格模式，您会在控制台中看到错误。

如何多次使用指令

How to use directive multiple times

angularjs

angularjs-directive