Browser does not detect changes in AngularJS

Question

Im developing an AngularJS application using IDE WebStorm and Safari browser.

Everything has worked perfectly so far, but I recently encapsulated some HTLM in a template that I use via a directive:

 .directive('referenceValue', [function ($scope) {
    return {
        restrict: 'E',
        templateUrl: "views/citizenprofile/reference/reference.html",
        controller: "referenceValueCtrl"
    }
}])

I "call" the directive the normal way, nothing fancy <reference-value></reference-value>

When I edit the reference.html the browser only detects the changes in the first edit.. If I edit reference.html a second time and update the browser then the change is not detected. If I restart the browser the change is detected again. So I basically need to restart my browser each time I want to debug the HTML code. Changes in the Controller is detected at every edit.

Can anyone tell me how to fix this error?

Open browser console(F12) -> click the upper right corner gear(Settings) -> Check "Disable cache (while DevTools is open)". Leave the console opened while you debugging. — AndreiC
– AndreiC, Commented Oct 9, 2015 at 14:29

show-me-the-code · Accepted Answer · 2015-10-09 14:30:18Z

2

Your template is being cached. There are a couple of work arounds. Either use Chrome's dev tools to disable cache when the dev tools is open, or use the $templateCache.remove() in your application.

app.run(function($rootScope, $templateCache) {
   $rootScope.$on('$viewContentLoaded', function() {
      $templateCache.removeAll();
   });
});

Find more info on removing the template cache here.

answered Oct 9, 2015 at 14:30

show-me-the-code

1,5531 gold badge13 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vingtoft Over a year ago

It is a question about cache. When I remove cache it works again. Thanks for the tip. Unfortunately Im using Safari so the $templateCache.removeAll(); does not work.

show-me-the-code Over a year ago

$templateCache.removeAll() is angular specific and not browser specific. The Dev tools cache disabling method is browser specific, but Safari dev tools also has an option to disable cache under Develop->Disable Cache. Hope that helps.

jstuartmilne · Accepted Answer · 2015-10-09 14:28:34Z

1

If you are using google chrome press CTRL+SHIF+J and on the network tab check 'Disable Cache'

Hope it helps

answered Oct 9, 2015 at 14:28

jstuartmilne

4,5181 gold badge22 silver badges30 bronze badges

Collectives™ on Stack Overflow

Browser does not detect changes in AngularJS

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related