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>

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>

如果倒计时只有1，这首先工作正常。但是当我在事件对象中添加多个event_date时

$interval.cancel(stop);

似乎不起作用。

例如，如果我有这些活动日期

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

第一个日期工作正常，但已经过的第二个日期并没有停止倒计时。如果查看控制台日志，它仍会多次显示“应该停止”。它应该只显示一次，因为当前时间和事件日期的差值为0或负时，if语句调用“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?。如果启用了严格模式，您可能会在控制台中看到错误。

如何多次使用指令

1 个答案: