当我访问另一个状态时停止功能

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