Angularjs - 如何清除$ routeProvider的templateUrl缓存

I have really basic use case in my app where I use AngularJS (1.0.8) for front end and Grails for back end. In the app layout I have a language switcher which allows the user to change the language. Switching the language, it does new http request to retrieve the page. Grails renders all language related stuff (i.e. labels) properly translated. This only works for Chrome, FF, and so but not for IE. IE renders proper language just for layout which is rendered by the main request.

我的应用程序中有一个非常基本的用例，我使用AngularJS（1.0.8）作为前端，Grails作为后端。在应用程序布局中，我有一个语言切换器，允许用户更改语言。切换语言时，它会执行新的http请求来检索页面。 Grails可以正确翻译所有与语言相关的内容（即标签）。这仅适用于Chrome，FF等，但不适用于IE。 IE只为主要请求呈现的布局呈现正确的语言。

I located the problem. I have defined $routeProvider where I load major of the app content. It is cached by default, therefore IE doesn't load templateUrl of $routeProvider because it loads them from cache:

我找到了问题。我已经定义了$ routeProvider，我加载了主要的app内容。它默认是缓存的，因此IE不加载$ routeProvider的templateUrl，因为它从缓存中加载它们：

myApp.config(function ($routeProvider) {
        $routeProvider.
            when('/', {controller: 'MyCtrl', templateUrl: '/eshop/myConfig'})
});

What I don't get is why it works in all other browsers.

我没有得到的是为什么它适用于所有其他浏览器。

I found some post how to clear cache but they doesn't work for me. Is there any solution for me? If not, I find $routeProvider completely useless for my use case. Post I found:

我发现了一些帖子如何清除缓存，但它们对我不起作用。对我有什么解决方案吗？如果没有，我发现$ routeProvider完全没用我的用例。我找到的帖子：

angularjs clear history when view loaded
angularjs在加载视图时清除历史记录
AngularJS disable partial caching on dev machine
AngularJS在开发机器上禁用部分缓存

3 个解决方案

#1

Below should do it. You can manipulate angularjs's template caches by using $templateCache, so $routeProvider will load the template as new every time you access the controller.

下面应该这样做。您可以使用$ templateCache操作angularjs的模板缓存，因此每次访问控制器时，$ routeProvider都会将模板加载为新模板。

myApp.config(function ($routeProvider) {
        $routeProvider.
            when('/', {controller: 'MyCtrl', templateUrl: '/eshop/myConfig'})
})

.controller('MyCtrl', function ($scope, $templateCache) {
    $templateCache.remove('/eshop/myConfig');
    // or
    $templateCache.removeAll();
});

#2

I was having the same issue with $routeProvider. And yes, the $templateCache does not help in this situation. Instead of keeping finding the real 'cache' source, I added the stamp parameter after the templateUrl. In my code:

我遇到了与$ routeProvider相同的问题。是的，$ templateCache在这种情况下无济于事。我没有继续找到真正的“缓存”源，而是在templateUrl之后添加了stamp参数。在我的代码中：

$routeProvider.
        when('/', {templateUrl: '../views/home.html?v='+window.buildNumber, controller: 'HomeCtrll'}).
        when('/report', {templateUrl: '../views/form.html?v='+window.buildNumber, controller: 'FormCtrll'}).
        otherwise({redirectTo: '/'});

Sadly, I used a global variable "buildNumber" to save my life. Because I also use RequireJS for my AngularJS project, so this "buildNumber" will also be added to every dependency JS file by using the code:

可悲的是，我使用全局变量“buildNumber”来挽救我的生命。因为我也使用RequireJS作为我的AngularJS项目，所以这个“buildNumber”也将通过使用代码添加到每个依赖JS文件中：

require.config({
    urlArgs: "v=" + window.buildNumber,
    paths: {....}
});

Then every time the JS source or template html has been changed, I will only need to update that "buildNumber" in global scope. This is just a thought for the future updates in production environment. Hope this helps.

然后每次更改JS源代码或模板html时，我只需要在全局范围内更新“buildNumber”。这只是对生产环境中未来更新的一种思考。希望这可以帮助。

#3

So the only solution I found was to completely disable cache for ajax queries. I found the solution here: https://*.com/a/19771501/607038

所以我找到的唯一解决方案是完全禁用ajax查询的缓存。我在这里找到了解决方案：https：//*.com/a/19771501/607038

myModule.config(['$httpProvider', function($httpProvider) {
    //initialize get if not there
    if (!$httpProvider.defaults.headers.get) {
        $httpProvider.defaults.headers.get = {};    
    }
    //disable IE ajax request caching
    $httpProvider.defaults.headers.get['If-Modified-Since'] = '0';
}]);

I don't like this solution because it disable cashing for the content which is really static. So if you have better solution than share it.

我不喜欢这个解决方案，因为它禁止兑现非常静态的内容。所以如果你有更好的解决方案而不是分享它。

#1