How can I fix this angular memory leak? - angularjs

Question

Here's my js
var app = angular.module('SearchAndResultsApp', ['angularUtils.directives.dirPagination']);
app.controller('SearchAndResultsController', function($location ,$scope, $http){
$scope.fields = [
{ id: 'accountNumber', name: 'Account Number', clicked: false},
{ id: 'pointOfInterestName', name: 'Point Of Interest Name', clicked: true},
{ id: 'address1', name: 'Address 1', clicked: false},
{ id: 'address2', name: 'Address 2', clicked: false},
{ id: 'city', name: 'City', clicked: false},
{ id: 'isostateCode', name: 'ISO State Code', clicked: false},
{ id: 'postalCode', name: 'Postal Code', clicked: false},
{ id: 'phone', name: 'Phone', clicked: false},
{ id: 'fax', name: 'Fax', clicked: false},
{ id: 'website', name: 'Website', clicked: false},
{ id: 'email', name: 'Email', clicked: false},
{ id: 'isocountryCode', name: 'ISO Country Code', clicked: false},
{ id: 'latitude', name: 'Latitude', clicked: false},
{ id: 'longitude', name: 'Longitude', clicked: false}
];
$scope.getSearchState = function() {
var fields = window.location.hash.substring(1).split("&");
if (fields.length > 0) {
return decodeURIComponent(fields[0]);
} else {
return '';
}
};
$scope.getPageState = function() {
var fields = window.location.hash.substring(1).split("&");
if (fields.length > 1) {
return parseInt(fields[1]);
} else {
return 1;
}
};
$scope.noResults = false;
$scope.pointsOfInterest = null;
$scope.loadingQuery = false;
$scope.orderDirection = 'asc';
$scope.glyphDirection = 'glyphicon-triangle-top';
$scope.orderedBy = 'pointOfInterestName';
$scope.previousClicked = $scope.fields[1];
$scope.lowerRange = 0;
$scope.upperRange = 0;
$scope.totalRange = 0;
$scope.currentPage = $scope.getPageState();
$scope.searchString = $scope.getSearchState();
$scope.offset = 'col-sm-offset-4';
$scope.loadingOffset = 'col-sm-offset-1';
$scope.getResultsState = function() {
return ((($scope.pointsOfInterest == null)||($scope.pointsOfInterest[0] == null)) && ($scope.searchString != ''))
};
$scope.downloadCSV = function(selection) {
if (selection == 'searched') {
window.location = 'pointsOfInterest/' + encodeURIComponent($scope.searchString) + '/orderedList/' + $scope.orderedBy + '/' + $scope.orderDirection + '/csv';
} else if (selection == 'all') {
if (confirm("This may take some time.")){
window.location = 'allPointsOfInterest/csv';
}
}
};
$scope.updateRanges = function() {
$scope.searchString = $scope.searchString = $scope.searchString.replace(/\//g,'').replace(/\\/g,'');
window.location.hash = encodeURIComponent($scope.searchString) + '&' + encodeURIComponent($scope.currentPage);
if ($scope.pointsOfInterest[0] != null) {
$scope.lowerRange = ($scope.currentPage - 1) * 20 + 1;
$scope.totalRange = $scope.pointsOfInterest.length;
$scope.upperRange = $scope.currentPage * 20;
} else {
$scope.lowerRange = 0;
$scope.totalRange = 0;
$scope.upperRange = 0;
}
if ($scope.upperRange > $scope.totalRange) {
$scope.upperRange = $scope.totalRange;
}
};
$scope.updateGlyphs = function(field) {
$scope.searchString = $scope.searchString = $scope.searchString.replace(/\//g,'').replace(/\\/g,'');
$scope.orderedBy = field.id;
if ($scope.previousClicked != null)
$scope.previousClicked.clicked = false;
field.clicked = true;
if ($scope.previousClicked == field) {
if ($scope.orderDirection == 'asc') {
$scope.orderDirection = 'desc';
$scope.glyphDirection = 'glyphicon-triangle-bottom';
} else {
$scope.orderDirection = 'asc';
$scope.glyphDirection = 'glyphicon-triangle-top';
}
} else {
$scope.orderDirection = 'asc';
$scope.glyphDirection = 'glyphicon-triangle-top';
}
$scope.updatePointsOfInterest();
$scope.previousClicked = field;
};
$scope.updatePointsOfInterest = function() {
if ($scope.searchString.length != 0) {
$scope.loadingOffset = '';
$scope.currentPage = $scope.getPageState();
$scope.searchString = $scope.searchString.replace(/\//g,'').replace(/\\/g,'');
window.location.hash = encodeURIComponent($scope.searchString) + '&' + encodeURIComponent($scope.currentPage);
if ($scope.searchString == '') return;
$scope.loadingQuery = true;
$http.get('pointsOfInterest/' + encodeURIComponent($scope.searchString) + '/orderedList/' + $scope.orderedBy + '/' + $scope.orderDirection)
.success(function(data) {
$scope.pointsOfInterest = data;
$scope.loadingQuery = false;
$scope.loadingOffset = 'col-sm-offset-1';
$scope.updateRanges();
$scope.noResults = $scope.getResultsState();
if ($scope.pointsOfInterest.length > 0) {
$scope.offset = '';
} else {
$scope.offset = 'col-sm-offset-4';
}
})
.error(function(data) {
window.location = 'pointsOfInterest/' + encodeURIComponent($scope.searchString) + '/orderedList/' + $scope.orderedBy + '/' + $scope.orderDirection;
});
}
};
window.onhashchange = function() {
$scope.updatePointsOfInterest();
}
$scope.updatePointsOfInterest();
$scope.gotoUpdatePage = function (accountNumber) {
window.location.href = 'pointOfInterestEditor/' + accountNumber;
};
$scope.onTextClick = function ($event) {
$event.target.select();
};
});
app.directive('ngDelay', ['$timeout', function ($timeout) {
return {
restrict: 'A',
scope: true,
compile: function (element, attributes) {
var expression = attributes['ngChange'];
if (!expression)
return;
var ngModel = attributes['ngModel'];
if (ngModel) attributes['ngModel'] = '$parent.' + ngModel;
attributes['ngChange'] = '$$delay.execute()';
return {
post: function (scope, element, attributes) {
scope.$$delay = {
expression: expression,
delay: scope.$eval(attributes['ngDelay']),
execute: function () {
var state = scope.$$delay;
state.then = Date.now();
$timeout(function () {
if (Date.now() - state.then >= state.delay)
scope.$parent.$eval(expression);
}, state.delay);
}
};
}
}
}
};
}]);
I get a memory leak from adding in the $location to the controller. I would like to use $location instead of window.location. I'm not sure why the memory leak is caused. Anyone know why and how to fix it?
Edit: It appears to be making infinite get requests. Still not sure how to fix it.

Answer 1

First of all $location service has a hash() method that u can use instead of window.location.hash().
Second: you call $scope.updatePointsOfInterest() method on your controller load that do a http get request. If it fails it changes the url. When the url is changed your controller code is reloaded, hence $scope.updatePointsOfInterest() method is executing again and again.
I'm not sure why $http.error() method is triggered. It could be anything. Check out your XHR request in Network tab in dev tools (Chrome).
If your $http.error() method should fail (this means that there's an error and it's properly handled) than to fix the "infinite looping" issue you can do the following:
1) either doesn't call $scope.updatePointsOfInterest() on controller loading
2) or doesn't change the url in your $http.error() method
If you describe what you're trying to achieve with this updatePointsOfInterest() method I will be able to help you write it properly.
Regards,
Aleksey