나는 Angular Timer를 가지고 놀고 있는데 , 내가 원하는 것은 이벤트의 "카운트 다운"을 변경할 수있는 것입니다. 나는 이것을 시도했다
<timer interval="1000" countdown="{{countdown}}">{{minutes}}:{{seconds}}</timer>
내 컨트롤러의 배짱이
// setup
...
$scope.timerRunning = true;
$scope.countdown = 10;
...
컨트롤러에서 처리 된 조건에 따라 카운트 다운을 동적으로 업데이트 할 수 있기를 원합니다. 예를 들어 완료 할 때마다 10을 추가합니다 (이벤트를 처리하는 방법을 알고 있습니다. 지시문이 카운트 다운을 업데이트하도록하는 문제 일뿐입니다)
속성에 이중 컬리 {{...}}는 이미 각도 표현식으로 해석되어 필요하지 않습니다. 따라서 다음은 범위 변수를 기반으로 속성을 설정합니다 countdown.
<timer interval="1000" countdown="countdown"/>{{minutes}}:{{seconds}}</timer>
컨트롤러에서 다음을 사용하십시오.
$scope.countdown= 120;
동적 업데이트
문제는 타이머를 동적으로 업데이트하는 것입니다. 지시어 속성은 기본적으로 다이제스트주기에서 감시되지 않습니다. 따라서 카운트 다운이 시작되면 속성을 다시 확인하지 않습니다. 예를 들어 카운트 다운을 업데이트 한 다음과 같은 버튼을 사용한 경우 :
<button ng-click="setCountdown(20)">set to 20</button>
이 기능으로
$scope.setCountdown = function(newVal) {
$scope.countdown =newVal;
}
버튼을 클릭하면 카운트 다운 변수가 업데이트되지만 타이머는 영향을받지 않습니다.
해결책
해당 타이머 지시문의 작성자는 setCountdown다음과 같이 함수 에서 사용할 수있는 타이머 시작 이벤트를 제공했습니다 .
$scope.setCountdown = function(newVal) {
$scope.countdown =newVal;
$timeout(function(){
$scope.$broadcast('timer-start');
},0);
}
여기서 카운트 다운을 업데이트 한 다음 timer-start이벤트를 발행 하여 타이머를 다시 시작합니다. $timeout속성이 업데이트되었는지 확인하기 위해 에서 브로드 캐스트를 발행합니다 . 그것 없이는 $timeout결과가 일관되지 않습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다