Angular 模板缓存 - 清除更新模板的缓存答案

【问题标题】：Angular Template Cache - Clear Cache For Updated TemplateAngular 模板缓存 - 清除更新模板的缓存
【发布时间】：2015-07-28 08:42:13
【问题描述】：

我有一个通过指令使用模板的 Angular。使用我拥有的一个模板有一个错误。进行更改并刷新浏览器后，我注意到它没有使用我修复错误的文件。然后我了解了模板缓存。很棒的功能，但是如何清除此更新模板的缓存？

注意：我没有使用 Angular 的路由。只需通过指令访问模板。

【问题讨论】：

标签： angularjs templates caching

【解决方案1】：

你使用的是 gulp 还是 Grunt？

我个人使用模板缓存，它收集所有 html 部分/模板并将它们放入 js 文件中。

优点： * 所有模板一次加载到一个 js 文件中。

缺点： * 每次您更改 html 文件时，您都必须重新生成模板缓存。您可以使用 gulp 来查看您的 html 文件，并且每次您更改某些内容时，它都会自动为您重新生成模板缓存:)

总之，用gulp-watch 和gulp-angular-templatecache 来解决你的问题。

【讨论】：

谢谢。我会调查一下。现在我正在做的是在 templateURL 的末尾添加一个带有随机数的后缀（例如'template.html?123'）。这可能是一个 hack，但为了让我继续前进，它是有效的。

【解决方案2】：

作为在模板 url 中附加数字的扩展，您可以考虑截取请求（所有请求）并在此处附加数字（版本、发布、日期等）。像这样的：

angular.module('my-app', []).config(function($httpProvider) {
  $httpProvider.interceptors.push(function($window) {
    return {
      'request': function(config) {
        // just yours (other libs, ie pagination might conflict with
        // their own insertions)
        if (!/^\/path-to-your-templates\//.test(config.url)) {
          return config;
        }
        // pull a # from wherever you like, maybe the window - set by
        // your backend layout engine?
        if ($window.version) {
          if (!config.params) {
            config.params = {};
          }
          if (!config.params.v) {
            config.params.v = $window.version;
          }
        }
        return config;
      }
    };
  });
});

【讨论】：