javascript - Angular: Remove a specific template from cache - Stack Overflow

I know how to remove all templates from cache by

$templateCache.removeAll();

But I want to remove a specific template only from cache. The template is not loaded from $routeProvider but it is being rendered from a directive by using

templateUrl: 'template/page/file.html'

My app structure is as this

-web
  - js
    - controllers
       - appController.js
  - templates
    - page
      - file.html

I did $templateCache.remove('/templates/page/file.html'); in appController.js

I know how to remove all templates from cache by

$templateCache.removeAll();

But I want to remove a specific template only from cache. The template is not loaded from $routeProvider but it is being rendered from a directive by using

templateUrl: 'template/page/file.html'

My app structure is as this

-web
  - js
    - controllers
       - appController.js
  - templates
    - page
      - file.html

I did $templateCache.remove('/templates/page/file.html'); in appController.js

• javascript
• angularjs
• angular-ui-bootstrap

Share Improve this question Follow edited Dec 28, 2016 at 14:57 Kunal arora asked Dec 28, 2016 at 14:12 Kunal aroraKunal arora 17511 gold badge22 silver badges88 bronze badges 5

• have you tried to do something like $templateCache.remove('template/file.html') .... i think it is a mon cache sistem and it use then path and name of a view as the key – federico scamuzzi Commented Dec 28, 2016 at 14:16
• yes i did try that, but its not working for me – Kunal arora Commented Dec 28, 2016 at 14:21
• remove(key) should work. – tasseKATT Commented Dec 28, 2016 at 14:23
• @tasseKATT what to write in key. can you show with an example? – Kunal arora Commented Dec 28, 2016 at 14:28
• The first answer tells that $templateCache use in fact $cacheFactory Link: stackoverflow./questions/25267962/… Try this: $cacheFactory.Cache.remove('yourTemplate') Info: docs.angularjs/api/ng/type/$cacheFactory.Cache – Aliz Commented Dec 28, 2016 at 14:32

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

The $templateCache is based off the $cacheFactory and since the latter has a .remove(key), it will work on your $templateCache as well. Perhaps you got the wrong key?

You could try and call .get(key) to check if you do have the correct key (i suspect you don't - and that is the reason .remove(key) doesn't work for you).

Perhaps the path to your template file is messing up the key, a relative path might not be the actual key, but rather the full path or the filename alone.

Try to do this in your run method of the app :

 app.run([
        "$rootScope", "$templateCache", "authService", function($rootScope, $templateCache, authService) {
            $rootScope.$on("$routeChangeStart", function(event, next, current) {

                    if (typeof (current) !== "undefined") {
                        $templateCache.remove(current.templateUrl);
                    }


            });
        }
    ]);

Problem was with my code, the function trigger was not right. I solved it by

$rootScope.$on('$viewContentLoaded', function() {
    $templateCache.remove('templates/page/file.html');
});

so now the template is removed from the cache when the page is loaded. Thanks for all the help.