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

Question

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

我找到了问题所在。我定义了 $routeProvider，其中加载了大部分应用程序内容。默认情况下，它被缓存，因此 IE 不会加载 $routeProvider 的 templateUrl，因为它们是从缓存中加载的:

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

我不明白的是为什么它在其他所有浏览器中都可以运行。 我找到了一些关于如何清除缓存的帖子，但它们对我没有用。有没有解决方案？如果没有，我发现$routeProvider对我的用例完全无用。 我找到的帖子：

• 当视图加载时清除AngularJS历史记录
• 在开发机器上禁用AngularJS部分缓存

- kuceram

---

是因为后端发送了一些缓存头，使得WebKit和Firefox浏览器不断请求模板，而IE则不解释它们吗？当语言更改时重新加载应用程序可能是一个合理的折衷方案。另一种方法是完全关闭$http缓存。 - musically_ut

在语言切换器上单击之前，为什么不手动清除模板缓存以进行HTTP调用。使用$templateCache.removeAll()。 - Ajay Beniwal

我已经尝试了你提出的 $templateCache.removeAll()，但是没有帮助。它清除了缓存，但是 $routeProvider 甚至不会为给定的 templateUrl 请求服务器。只有在我刷新时它才会再次请求服务器。因此，问题似乎出在其他地方。 - kuceram

Answer 1

д»ҘдёӢеә”иҜҘеҸҜд»Ҙи§ЈеҶіиҝҷдёӘй—®йўҳгҖӮжӮЁеҸҜд»ҘдҪҝз”Ё$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();
});

- KinoP

Answer 2

我也遇到了$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: '/'});

不幸的是，我使用了一个全局变量 "buildNumber" 来拯救我的生命。因为我还在 AngularJS 项目中使用 RequireJS，所以这个 "buildNumber" 也会通过以下代码添加到每个依赖的 JS 文件中：

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

那么每次JS源代码或模板HTML发生更改时，我只需要更新全局范围内的“buildNumber”。这只是一种为将来在生产环境中进行更新的想法。希望这能有所帮助。

- Peng

Answer 3

所以我找到的唯一解决方案是完全禁用 AJAX 查询的缓存。我在这里找到了解决方案：https://dev59.com/YGQo5IYBdhLWcg3wXuin#19771501。

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';
}]);

我不喜欢这个解决方案，因为它禁用了对真正静态内容的缓存。所以，如果你有比这更好的解决方案，请分享。

- kuceram