Question

在下面的示例中，您可以看到，每次进入页面时，都会使用不同的id创建同一控制器的新实例，而旧的实例不会被销毁，setIntervat方法会记录相应的范围ID和所有这些都是水果名。我们说我有一个ajax调用而不是日志，会不时刷新页面内容，但我不想打电话给非活动页面，我该如何修复此？

example

var app = angular.module('plunker', ['ngRoute']);

app.config(['$routeProvider', function($routeProvider) {
  $routeProvider
    .when('/fruit/:fruitId', {
      templateUrl: 'fruit-tpl.html',
      controller: 'FruitController'
    })
    .otherwise({
      redirectTo: '/fruit/1'
    });
}]);

app.controller('FruitController', ['$scope', '$routeParams',
  function($scope, $routeParams) {
    var fruitArr = ['Lemons', 'Oranges', 'Grapefruit'],
        fruitId = $routeParams.fruitId - 1;

    $scope.fruitName = fruitArr[fruitId];

    setInterval(function() {
      console.log('scope', $scope.$id, $scope.fruitName);
    }, 3000);
  }
]);

Answer 1

当控制器被销毁时，setInterval不会自动停止，并且在它被停止之前，由传递给它的闭包关闭的变量将保留在内存中。即使您切换到$interval，同样的问题也会持续存在。

注意：完成后，必须明确销毁此服务创建的间隔。特别是当控制器的范围或指令的元素被破坏时，它们不会被自动销毁。您应该考虑到这一点，并确保始终在适当的时候取消间隔。有关如何以及何时执行此操作的详细信息，请参阅下面的示例。

var theInterval = setInterval(function() {
  console.log('scope', $scope.$id, $scope.fruitName);
}, 3000);
$scope.$on('$destroy', function() {
  // Make sure that the interval is destroyed too
  clearInterval(theInterval);
});

创建同一控制器的角度多个实例

1 个答案: