Whenever you change routes, the controller responsible for that route is initialized upon loading the route and destroyed when the route is changed. As a result, the data gets lost because the controller is reinitialized and the previous data does not persist.
There are two solutions to this issue:
Implement a higher-level controller that is not destroyed, potentially residing on the body element, passing its scope to child controllers. However, this method does not truly modularize concerns but can be useful for other issues like Authentication or Profile management.
A better approach would be pulling the data into a service, such as listService, which fetches and caches the data, ensuring it remains available even when the route is changed.
An alternative solution could involve:
If there's a higher-level controller handling data fetching or if the data is moved to a service (recommended), the data loaded by the loadMore function will stay intact. It should reside in a parent scope that persists through route changes.
HTML:
<body ng-controller="ApplicationController">
<!-- Code Here -->
</body>
Controller:
myControllers.controller('ApplicationController', function($scope) {
var data = [];
$scope.loadmore = function () {
// Use Angular here!!! $http not jQuery!
// A complete Angular app can be built without relying on jQuery
// Angular's implementation of jQuery Lite will be used
jQuery.ajax({
url: 'trolls/trolls.php?troll_index=' + $('#main-content #item-list .sub-item').size(),
type: 'GET',
async: false,
data: {},
dataType: 'json',
success: function (response) {
if (response != null) {
$.each(response, function (index, item) {
data.push({
UID: response[index].UID,
id: response[index].id,
popular: response[index].popular,
imageUrl: response[index].imageUrl,
name: response[index].name,
tags: response[index].tags,
category: response[index].category
});
});
}
return data;
}
error: function () {
console.log('Failed!');
}
});
}
});
However, this approach may seem hacky using jQuery.
Another approach utilizing a service for fetching and caching:
Moving the functionality to a service seems more appropriate.
myServices.factory('listService', function($http, $q) {
var//iable declaration
service = {},
list = []
;
/////////////////////
//Private functions//
/////////////////////
function loadMore(url) {
var deferred = $q.defer();
$http({ method: 'GET', url: url }) // Need to pass in the specific URL maybe from the DOM scoped function?
.success(function(data) {
deferred.resolve(data);
})
.error(function() {
deferred.reject();
//Do error things
});
return deferred.promise;
}
////////////////////
//Public Functions//
////////////////////
service.loadMore = function(url) {
// Used for loading more data
loadMore(url).then(function(data) {
list.push(data);
return list
});
}
service.getList = function() {
// Returns the currently loaded data
return list;
}
return service;
});
In your controller:
myControllers.controller('ListCtrl', ['$scope', '$location', 'Troll', listService
function ($scope, $location, Troll, listService) {
$scope.Trolls = Troll.query();
$scope.orderProp = 'popular';
$scope.fromData = {};
$scope.loadmore = function(subItemSize) { //add url specific params here
var url = 'trolls/trolls.php?troll_index=' + subItemSize;
return listService.loadMore(url);
};
}]);