Below is a snippet of code I wrote to set up an interval that should be canceled when leaving the state, but it's not working as expected.
var init = function () {
$translatePartialLoader.addPart("app/bottling/palletTnT/palletTnT.grid");
$translate.refresh();
//$scope.disablePaging = false;
setColumnDefs();
updateDataGrid();
getRefreshTimer().then(function () {
if ($scope.RefreshTime != 0 && !intervalPromise) {
intervalPromise = $interval(function () {
getLaneBufferData(palletTnTService.wrapperFilter);
}, $scope.RefreshTime * 1000);
}
});
}
var intervalPromise = null;
$scope.$on('$stateChangeSuccess', function () {
$interval.cancel(intervalPromise);
});
The 'init' function is called when the page is first opened. The issue at hand is this:
When we navigate away from this page, the interval continues running in the background even though it should have been canceled. Oddly enough, manually refreshing the page (F5) stops the interval from running properly. I've tried various solutions without success, so any help is appreciated.
Thanks in advance...
By the way, using the '$destroy' method yielded the same results.