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
}

这很好，因为它是一个无限的动画。我将console.log（“hello”）放在 tick 函数中，然后每次执行此函数时，都会将“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");
  }
}

在此处阅读Angular的范围$destroy事件：https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$destroy

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

1 个答案: