创建同一控制器的 Angular 多个实例答案

【问题标题】：Angular multiple instances of the same controller are created创建同一控制器的 Angular 多个实例
【发布时间】：2015-09-05 12:13:00
【问题描述】：

在下面的示例中，您可以看到每次访问页面时，都会使用不同的 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);
  }
]);

【问题讨论】：

setInterval 不会消失当然是因为你没有阻止它。而且，在你停止它之前，它使用的变量不能被垃圾回收。

标签： angularjs controller scope ngroute ng-view

【解决方案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);
});

【讨论】：