Scenario
The initial $resource query() retrieves an object containing 'A', 'B', & 'C' entries from the server.
The user then goes to a different Add Entry Screen and adds a 'D' entry. This Screen is done via a server-side process not via a client-side process.
The user now goes back to the first screen and re-queries the $resource query(), however, this is STILL showing the object containing 'A', 'B', & 'C' entries. The 'D' is not in the object retrieved by $resource.
Question
How can the $resource query() be done so that it can now go to the server and retrieve the latest list?
Research
The closest I found to an answer is here -> How to refresh local data fetched using $resource service in AngularJS, however, I'm not sure what the person meant by
Adding a new instance to a list in the scope will refresh the list displayed on the page.
Some Code Snippets
Controller js:
angular.module('AutomationApp')
.controller('FirstTryController', function ($scope, TestSuites) {
$scope.testsuites = {};
TestSuites.query(function (response) {
$scope.testsuites = response.TestSuites;
});
});
Service js:
angular.module('AutomationApp')
.factory('TestSuites', function ($resource) {
return $resource('/api/listTestSuites/:TestSuiteId',
{ TestSuiteId: '@TestSuiteId' },
{
query: {
method: 'GET',
params: {},
isArray: false
}
});
});
app.js:
var app = angular.module('AutomationApp', ['ngRoute', 'ngResource']);
app.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/list', {
templateUrl: 'app/views/firsttry.html',
controller: 'FirstTryController',
resolve: {
delay: function ($q, $timeout) {
var delay = $q.defer();
$timeout(delay.resolve, 500);
return delay.promise;
}
}
});
});
Recap/Summary
On the initial $resource query(), it is retrieving the latest data as expected. However, if the data in the server is modified by some server side process, and the user goes back and reexecutes the $resource query(), the data retrieved does not reflect the newly modified server side data.
Thank you in advance.
**** ---- EDIT UPDATE ---- ****
It appears to be IE 8 related. This code works with Chrome and Mozilla but no with IE 8. Any idea where to go from here? Thank you again.
RESOLVED
I went with what I found in this post Angular IE Caching issue for $http. Thank you Pathsofdesign for supplying the link.
I did the following change to make this work (ADDED content inside params {}):
Service js:
angular.module('AutomationApp')
.factory('TestSuites', function ($resource) {
return $resource('/api/listTestSuites/:TestSuiteId',
{ TestSuiteId: '@TestSuiteId' },
{
query: {
method: 'GET',
params: { 'foobar': new Date().getTime() },
isArray: false
}
});
});