Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Force reload of a directive's template

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.

like image 515
F Lekschas Avatar asked Nov 19 '12 09:11

F Lekschas


3 Answers

I know this is an old question, but here's a simpler fix, although it's a bit of a hack, it works for me, and doesn't require you to do anything to $templateCache.

Whenever I run into this problem (I see it in directive templates, but also static JSON files), I add a query parameter to the end of the URL being loaded, like this:

...
templateUrl: "partials/template.html?1",
...

Whenever I make a changes to the template, and it's not reloading, I increment that number at the end. As the browser doesn't know if this might mean something special to the server, it should attempt to reload that changed URL whether it's cached or not. This will also make sure the file is reloaded in the production environment.

like image 167
user4815162342 Avatar answered Sep 27 '22 22:09

user4815162342


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.

like image 38
Tiago Roldão Avatar answered Sep 27 '22 20:09

Tiago Roldão


app.controller('someCtrl', function ($scope, $cacheFactory, templateRequest)
{   
    $scope.refreshTemplate = function ()
    {
      var tpl = "<template name>";
      $cacheFactory.get('templates').remove(tpl);
      $templateRequest(tpl).then(function ok(){
          console.log("Template "+tpl+" loaded.");
      });
     }
   ...
  }

then when you call the refreshTemplate function you cause a re-load

like image 28
Ran Cohen Avatar answered Sep 27 '22 22:09

Ran Cohen