각도 1.58 구성 요소 $ timeout 변경 내용이 적용되지 않습니다.

Question

구성 요소를 사용하도록 코드를 변환 할 때 문제가 발생했습니다. 구성 요소 컨트롤러에서 나는 $ timeout 함수를 사용하여 객체의 업데이트를 지연시킵니다. 이것은 정상적인 컨트롤러로 작동하지만,하지 않는 구성 요소 내 - 코드는 매우 간단하다 :

this.settime = function(){ 
    this.showDisplay = {hide:true}; 
    $timeout(function() { 
    this.showDisplay= {hide:false}; 
    }, 2000); 
}; 

문제는 업데이트 된 값이 예 $ ctrl.showDisplay.hide에서 DOM에 전달되지 않는 것을 는 true로 설정되지만 시간 초과가 완료되면 false로 돌아 가지 않습니다. 나는 $ scope를 사용해 보았습니다. $ apply(); 강제로 업데이트하지만 영향은 없습니다.

Answer 1

this 내부에는 $timeout 내부 기능이있는 context과 다른 기능이 있습니다. showDisplay 개체의 숨기기 property을 변경하는 동안 개체 참조를 변경하지 않아도 속성을 직접 변경할 수 있습니다.

var self = this; 
self.settime = function(){ 
    self.showDisplay = {hide:true}; 
    $timeout(function() { 
    self.showDisplay.hide = false; 
    }, 2000); 
}; 

ES6 버전

this.settime = function(){ 
    this.showDisplay = {hide:true}; 
    $timeout(() => { 
    this.showDisplay.hide = false; 
    }, 2000); 
};