按下后退按钮后停止角度 $timeout 计时器

Question

在我的 Angular 应用中，我有第 1 页和第 2 页。

第 1 页基本上是带有链接到第 2 页的按钮的主页。

Page 1 有一个名为 Page1App 的 Angular 应用程序和一个名为 Page1Ctrl 的控制器。 Page 2 有一个名为 Page2App 的 Angular 应用程序和一个名为 Page2Ctrl 的控制器。

Page1App 具有 Page2App 作为依赖项。

angular.module('Page1App', ['Page2App']);

在第 2 页中，有一个计时器，其工作原理类似于 this JSFiddle 中的计时器（代码重复如下）

 $scope.nextPic = function() {
      $timeout.cancel(picTimeout)
      if (++$scope.picIndex >= $scope.pics.length) $scope.picIndex=0
      picTimeout = $timeout($scope.nextPic, 2000)
  }

  $scope.prevPic = function() {
      $timeout.cancel(picTimeout)
      if (--$scope.picIndex < 0 ) $scope.picIndex=$scope.pics.length-1
      picTimeout = $timeout($scope.nextPic, 2000)
  }
  picTimeout = $timeout($scope.nextPic, 2000)

问题是，当我从Page 2回到Page 1时，计时器继续在后台运行，偶尔会弹出alert -如果您在第 2 页上可以，但如果您已经离开第 2 页，则不行。

当用户离开页面 2 时，我如何让页面 2 中的所有内容停止？

Answer 1

您可以侦听范围销毁事件侦听器并清除超时。

例如：

$scope.$on('$destroy', function() {
    $timeout.cancel(picTimeout);
});

检查DOC 的$destroy 范围事件。