$ timeout을 사용하여 Angular에서 이벤트 시퀀스를 실행하는 방법

Question

내 보기에이라는 div가 있는데, ng-click() 함수를 실행하여 div의 배경을 'color a'로 바꿉니다. 60 초 동안 아무 조치도 취하지 않으면 30 초 후 'color b'로 변경하고 120 초 이상 아무런 조치도 취하지 않으면 div를 숨 깁니다 (클래스 추가/제거를 통해 수행 가능)

본질 나는 하나의 타임 아웃이 다른 타임 아웃으로 이어지는 각도로 $ 타임 아웃 시퀀스를 실행하려고한다.

도움이된다면 대단히 감사하겠습니다. 감사합니다. .

Answer 1

범위를 변수로 사용하여 상태를 유지하고 상태간에 이동하려면 $timeout을 연결합니다. 클릭 될 요소 그래서 :

<span ng-click="startChange()">Click me to start</span> 

와 컨트롤러 :

$scope.state = 'a'; 
$scope.startChange = function() { 
    $scope.state = 'b'; 
    return $timeout(angular.noop, 30 * 1000).then(function() { 
    $scope.state = 'c'; 
    return $timeout(angular.noop, 60 * 1000); 
    }).then(function() { 
    $scope.state = 'd'; 
    return $timeout(angular.noop, 120 * 1000); 
    }).then(function() { 
    $scope.state = 'e' 
    }); 
} 

angular.noop는 아무것도하지 않는 기능은이다. 다소 개인적인 취향이지만, $timeout에 전달 된 콜백이 아무 것도하지 않고 범위의 모든 동작이 항상 약속의 성공 콜백 then에있는 활동의 흐름을 보는 것이 더 쉽다는 것을 알았습니다. 배경 사업부의 템플릿에서

: 난 당신이 컨트롤러 나에있는 다른 무엇 확실하지 않다, 그러나

.background-state-a {background-color: red} 
.background-state-b {background-color: green} 
.background-state-c {background-color: blue} 
... 

:

<div class="background-state-{{state}}">....</div> 

다음 CSS에서이 색상을 설정 정확한 유스 케이스. 비즈니스 로직을 뷰 로직과 섞을 수 있으므로 일부 로직을 지시문으로 분리해야 할 수 있습니다.