Созданы угловые множественные экземпляры одного и того же контроллера

Question

В моем примере ниже вы можете видеть, что каждый раз, когда вы переходите на страницу, новый экземпляр того же контроллера создается с другим идентификатором, а старый не уничтожается, Метод setIntervat сохраняет все соответствующие идентификаторы области и имени фрукта. Предположим, у меня есть вызов 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); 
});