지시어를 여러 번 사용하는 방법

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> 

카운트 다운은 1입니다하지만 경우에 잘 처음 작동

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

TEMPLATE 나는 이벤트 객체에서 여러 EVENT_DATE를 추가 할 때 the

$interval.cancel(stop); 

보이지 않습니다.

예를 들어 나는이 이벤트는 첫 데이트는 잘 작동하지만, 이미 통과 한 두 번째 날짜가 카운트 다운을 중지하지 않습니다

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

날짜가있는 경우. 콘솔 로그를 보면 "중지해야합니다"라는 메시지가 여러 번 표시됩니다. 현재 시간과 이벤트 날짜의 차이가 0 또는 음수 일 때 "stopTimer"함수를 호출하는 if 문을 만든 후 한 번만 표시되어야합니다.

도와주세요. 고마워.

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?을 참조하십시오. 엄격 모드가 활성화 된 경우 콘솔에 오류가 표시됩니다.