Question

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

我想这个问题在某种程度上是$ templateCache，它似乎是AngularJS在加载模板时使用的。

我在AngularJS 1.0.2的源代码中找到的是以下第4317行，它是compileTemplateUrl（）的一部分：

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

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

Answer 1

我知道这是一个老问题，但这里有一个更简单的修复，虽然它有点像黑客，但它对我有用，并且不需要你对$ templateCache做任何事情。

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

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

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

Answer 2

模板缓存存储在浏览器中，因为这是一个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'];

请参阅此fiddle。

要阻止您的浏览器缓存模板（完全引用此Google Groups post引用此问题）：

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

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

Answer 3

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函数时会导致重新加载

强制重新加载指令的模板

3 个答案: