On data change server-side, cache should be immediately overwritten

[HRoger]

First of all many thanks for providing us with this great tool!

I have a question that unfortunately I couldn’t find an answer on the documentation:

I would like to each time a user updates his content in the backend the new generated Json data should overwrite right off the bat the old cached one. So each time data changes in the backend the local storage is cleared and the browser is forced to grab the new data.

Example:
1-Data cached in localstorage --> “Hi there I’m the old cached data” 2-User updates content in the backend and generated a new json data --> “I’m the new data” 3- Old cached data is immediately overwritten with the new content --> “I’m the new data”

My $http service code:

angularpressApp.factory('widgetData', function ($http, wpAjax) {

    return{

        getWidget: function (successcb, sidebar_id) {
            $http({
                method: 'GET',
                cache : true,
                url   : wpAjax.themeLocation.siteUrl + '/api/widgets/get_sidebar/',
                params: {
                    sidebar_id: sidebar_id
                }
            })
                .success(function (data) {
                    return successcb(data);

                })
                .error(function () {
                    if (wpAjax.sessions.on_first_page_load === null)
                    //if something went wrong after the first page load throw error
                        throw new Error('Network error. Widgets not loaded.');
                })
        }

    }

});

My Directive:

angularpressApp.directive('widgetSidebar', function (widgetData, wpAjax) {

    return{
        restrict   : 'E',
        replace    : true,
        scope      : {},
        templateUrl: wpAjax.themeLocation.templateDir + '/library/scripts/directives/partials/widget-sidebar.html',

        link: function (scope, element, attrs) {

            element.find('.loading-spinner').spin('large-widgets');

            widgetData.getWidget(

                function (data) {
                    element.find('.loading-spinner').spin(false);
                    scope.widgets = data.widgets;

                }, attrs.name);

        }
    };

});

Any help would be greatly appreciated,

Many thanks,

HRoger

[jmdobry]

Since this question is not an issue with Angular-cache I will close this issue. You're better off asking your question on the mailing list.

But to answer your question,

$http({
  ...
  cache : true,
  ...
});

will cause $http to use a cache produced by $cacheFactory unless you changed the default $http cache (see the first example in the Using angular-cache with $http guide) like so:

$http.defaults.cache = $angularCacheFactory.get('myCache');

in which case, your app won't even be using $angularCacheFactory. The regular $cacheFactory will store items forever unless you remove them, so if you want to overwrite something already in the cache you have to do it manually. A second $http call with the same url will not do it for you because it will just return the data already in the cache.

There are multiple ways to handle this. One way is to "bust" the cache or specific item in the cache. In your case, your item will be stored under the key wpAjax.themeLocation.siteUrl + '/api/widgets/get_sidebar/'. When you know the cached data is stale you can remove it from the cache before you make the request for the latest data.

Another way is to not let $http handle any of your caching, but do it yourself. For this, refer to the third example in the Using angular-cache with $http guide.

[HRoger]

Ok! I got it! Many thanks!!