33

我正在开发一个带有多个指令的 AngularJS 应用程序。该指令的模板存储在一个单独的 html 文件中。编辑这些模板时，我的浏览器在重新加载后未检测到任何更改，并且始终使用缓存版本。检测到对源代码的任何其他更改并导致重新加载。

我猜这个问题有点像AngularJS在加载模板时使用的$templateCache。

我在 AngularJS 1.0.2 的源代码中发现以下内容来自第 4317 行，它是 compileTemplateUrl() 的一部分：

$http.get(origAsyncDirective.templateUrl, {cache: $templateCache})

我想知道是否有其他人遇到过这种问题，以及是否有办法告诉 AngularJS 何时缓存，何时不缓存。

4

3 回答 3

40

我知道这是一个老问题，但这里有一个更简单的解决方法，虽然它有点小技巧，但它对我有用，并且不需要你对 $templateCache 做任何事情。

每当我遇到这个问题（我在指令模板中看到它，但也看到静态 JSON 文件）时，我都会在正在加载的 URL 的末尾添加一个查询参数，如下所示：

...
templateUrl: "partials/template.html?1",
...

每当我对模板进行更改并且它没有重新加载时，我都会在最后增加该数字。由于浏览器不知道这对服务器是否有特殊意义，它应该尝试重新加载更改后的 URL，无论它是否被缓存。这也将确保文件在生产环境中重新加载。

于 2014-06-27T21:18:01.470 回答
15

模板缓存存储在您的浏览器中，因为这是一个 javascript 应用程序。实际上，您可以使用开发人员工具手动提供 $cache 或阻止浏览器缓存模板（因为对于生产来说，缓存似乎不是问题）。

对于强制馈送缓存：

function Main($cache) {
    $cache.data['first.html'] = {value: 'First template'};
    $cache.data['second.html'] = {value: '<b>Second</b> template'};

}

Main.$inject = ['$xhr.cache'];​

看到它在这个小提琴中工作。

要阻止您的浏览器缓存模板（引用自此Google Groups 帖子，关于此问题，确切地说）：

我和我的团队遇到了同样的问题。我们在使用 Chrome 时进行开发的解决方案是打开开发者工具，然后选择右下角的齿轮。然后选择网络 - 禁用缓存。

这解决了我们所有的部分/模板缓存问题。

于 2012-11-19T09:53:56.680 回答
1 
app.controller('someCtrl', function ($scope, $cacheFactory, templateRequest)
{   
    $scope.refreshTemplate = function ()
    {
      var tpl = "<template name>";
      $cacheFactory.get('templates').remove(tpl);
      $templateRequest(tpl).then(function ok(){
          console.log("Template "+tpl+" loaded.");
      });
     }
   ...
  }

那么当你调用 refreshTemplate 函数时，你会导致重新加载

于 2016-02-24T12:52:11.433 回答