Question

63

Force reload of a directive's template

rated 0 times [ 68] [ 5] / answers: 1 / hits: 20630 / 12 Years ago, mon, november 19, 2012, 12:00:00

I am working on an AngularJS app with several directives. The directive's templates are stored in a separate html file. When editing these template, my browser does not detect any changes after a reload and always uses a cached version. Any other changes to the source code are detected and lead to a reload.

I guess the problem is somewhat the $templateCache which seems to be used by AngularJS when loading the template.

What I found in the source code of AngularJS 1.0.2 is the following from line 4317 which is part of the compileTemplateUrl():

$http.get(origAsyncDirective.templateUrl, {cache: $templateCache})

I am wondering if anyone else had this kind of problem and if there is a way to tell AngularJS when to cache and when not.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jennie

Add To Favorites

Follow

Total Points: 593

Total Questions: 102

Total Answers: 106

Location: Federated States of Micronesia

Member since Fri, Sep 16, 2022

2 Years ago

jennie questions

1 Is there a React equivalent of Vue's nextTick() function?

Tue, Jun 21, 22, 00:00, 2 Years ago

1 how to loop to expect a list of item in jest

Tue, Feb 8, 22, 00:00, 2 Years ago

1 arrow function expected no return value with clean-up function in useEffect

Sun, May 23, 21, 00:00, 3 Years ago

1 React Re-Render Causes Flickering : How can i fix this?

Thu, Mar 4, 21, 00:00, 3 Years ago

1 React onChange not working for input inside functional component

Thu, Feb 25, 21, 00:00, 3 Years ago

View All

answered 12 Years ago corie · Accepted Answer

The template cache is stored in your browser, as this is a javascript app. You can actually feed the $cache manually or stop your browser from caching the templates (as it would seem that for production, cache won't be a problem), using developer tools.

For force feeding the cache:

function Main($cache) {

    $cache.data['first.html'] = {value: 'First template'};

    $cache.data['second.html'] = {value: '<b>Second</b> template'};



}



Main.$inject = ['$xhr.cache'];

See it working in this fiddle.

To stop your browser from caching the templates (cited from this Google Groups post, about this problem, exactly):

My team and I have ran into this same issue. Our solution for
development while using Chrome was to open Developer Tools, and select
the gear in the bottom right hand corner. Then select Network -
Disable cache.

This fixed all our partial/template caching issues.