如何使用$ timeout在Angular中執行一系列事件

Question

我在我的視圖中有一個div，我想在ng-click（）上執行一個函數，將div的背景變成'color a'for如果沒有采取任何行動，則持續30秒，然後持續60秒，然後更改爲'顏色b'，如果超過120秒沒有采取任何行動，只需隱藏該分區（也可以通過添加/刪除分類來完成）。本質我期待執行一系列$超時在一個超時導致另一個角度。

任何幫助，將非常感激。 謝謝。

Answer 1

我會通過使用範圍中的一個變量來保持狀態，並鏈接$timeout s以在狀態之間移動。因此，將被點擊的元素：

<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的活動流程更容易一點，並且範圍內的所有操作始終在承諾的成功回調中。

在模板背景DIV：

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

，然後在CSS設置顏色：

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

但是，我不知道你在控制器或你還有什麼確切的用例。您可能希望將某些邏輯分離爲指令，因爲它可能將業務邏輯與視圖邏輯混合在一起。