當我訪問另一個狀態時停止功能

Question

我有兩個控制器。一個名爲page1的頁面和另一個名爲page2的頁面。在頁面1我有一個運行動畫的代碼。我有一個無限調用自己的函數。在這一行。

.each（'end'，tick）當動畫結束時，它再次開始tick（）。

function tick(){ 
console.log("hello"); 
. 
. 
. 
//line 190 
paths.attr('transform', null) 
.transition() 
.duration(duration) 
.ease('linear') 
.attr('transform', 'translate(' + x(now - (limit - 1) * duration) + ')') 
.each('end', tick) //when the transition ends, it start tick() again 
} 

這很好，因爲它是一個無限的動畫。我在tick函數中放了console.log（「hello」），然後每次執行這個函數時，單詞「hello」被寫入控制檯。到現在爲止還挺好 ！。當我改變控制器的時候，即當我點擊去第2頁時，我以前的動畫仍在運行，我仍然可以看到第一個控制器中的函數的console.log（「hello」）。

當我更換控制器時，如何停止此功能？

這是我的代碼：

http://plnkr.co/edit/66cK7gWTNQNh4vmC2lmp?p=preview

Answer 1

監聽範圍受到破壞，停止你的動畫循環：

function MyController($scope) { 
    var animating = true; 
    $scope.$on('$destroy', function() { 
    animating = false; 
    }); 

    function tick() { 
    if (!animating) return; 
    console.log("hello"); 
    } 
} 

閱讀關於角的範圍$destroy事件在這裏：https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$destroy