There's a recurring issue with my angular application where the page fails to refresh after data manipulation such as addition, editing, or removal. For example, when I add a new item to a list of subjects, it doesn't show up unless I navigate away from the page and return to it. I attempted to solve this by using route.reload and resetting the scope of the subjects list below. However, an alert I placed for debugging purposes fires before the page redirects back to the list of subjects even though $location.path('/subjects') is defined two lines earlier. Here's an excerpt from my controller:
angular.module('myApp.controllers')
.controller('SubjectEditCtrl', ['$scope', '$routeParams', 'SubjectFactory', 'SubjectsFactory', '$location', '$route',
function ($scope, $routeParams, SubjectFactory, SubjectsFactory, $location, $route) {
// On clicking 'updateSubject':
$scope.updateSubject = function () {
// Update on the server
SubjectFactory.update($scope.subject);
// Redirect to the list of all subjects
$location.path('/subjects/');
// Reset the subject list scope
$scope.subjects = SubjectsFactory.query();
// Reload the page
$route.reload();
// The alert displays before the redirect
alert('route reload happening');
};
SubjectFactory.show({id: $routeParams.subjectId}).$promise.then(function(subject) {
$scope.subject = subject;
}, function(err) {
console.error(err);
});
}]);
Is there any suggestion for resolving this issue?
EDIT: Subjects Service
var app = angular.module('myApp.services');
app.factory('SubjectsFactory', function ($resource) {
return $resource('https://myapiurl.com/subjects', {}, {
query: { method: 'GET', isArray: true },
create: { method: 'POST' }
})
});
app.factory('SubjectFactory', function ($resource) {
return $resource('https://myapiurl.com/subjects/:id', {}, {
show: { method: 'GET', isArray: false },
update: { method: 'PATCH', params: {id: '@id'} },
delete: { method: 'DELETE', params: {id: '@id'} }
})
});