javascript 强制重新加载指令的模板
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13450926/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Force reload of a directive's template
提问by F Lekschas
I am working on an AngularJS app with several directives. The directive's templates are stored in a separate html file. When editing these template, my browser does not detect any changes after a reload and always uses a cached version. Any other changes to the source code are detected and lead to a reload.
我正在开发具有多个指令的 AngularJS 应用程序。该指令的模板存储在单独的 html 文件中。编辑这些模板时，我的浏览器在重新加载后未检测到任何更改，并且始终使用缓存版本。检测到源代码的任何其他更改并导致重新加载。
I guess the problem is somewhat the $templateCache which seems to be used by AngularJS when loading the template.
我想问题有点出在 $templateCache 上，AngularJS 在加载模板时似乎使用了它。
What I found in the source code of AngularJS 1.0.2 is the following from line 4317 which is part of the compileTemplateUrl():
我在 AngularJS 1.0.2 的源代码中发现的是来自第 4317 行的以下内容，它是 compileTemplateUrl() 的一部分：
$http.get(origAsyncDirective.templateUrl, {cache: $templateCache})
I am wondering if anyone else had this kind of problem and if there is a way to tell AngularJS when to cache and when not.
我想知道是否还有其他人遇到过这种问题，是否有办法告诉 AngularJS 何时缓存，何时不缓存。
采纳答案by Tiago Rold?o
The template cache is stored in your browser, as this is a javascript app. You can actually feed the $cache manually or stop your browser from caching the templates (as it would seem that for production, cache won't be a problem), using developer tools.
For force feeding the cache:
模板缓存存储在您的浏览器中，因为这是一个 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'];?
See it working in this fiddle.
看到它在这个fiddle 中工作。
To stop your browser from caching the templates (cited from this Google Groups post, about this problem, exactly):
要阻止您的浏览器缓存模板（从这篇Google Groups 帖子中引用，确切地说是关于这个问题）：
My team and I have ran into this same issue. Our solution for development while using Chrome was to open Developer Tools, and select the gear in the bottom right hand corner. Then select Network - Disable cache.
This fixed all our partial/template caching issues.
我和我的团队遇到了同样的问题。我们使用 Chrome 进行开发的解决方案是打开开发人员工具，然后选择右下角的齿轮。然后选择网络 - 禁用缓存。
这修复了我们所有的部分/模板缓存问题。
回答by user4815162342
I know this is an old question, but here's a simpler fix, although it's a bit of a hack, it works for me, and doesn't require you to do anything to $templateCache.
我知道这是一个老问题，但这里有一个更简单的解决方法，虽然它有点麻烦，但它对我有用，并且不需要您对 $templateCache 做任何事情。
Whenever I run into this problem (I see it in directive templates, but also static JSON files), I add a query parameter to the end of the URL being loaded, like this:
每当我遇到这个问题（我在指令模板和静态 JSON 文件中看到它）时，我都会在正在加载的 URL 的末尾添加一个查询参数，如下所示：
...
templateUrl: "partials/template.html?1",
...
Whenever I make a changes to the template, and it's not reloading, I increment that number at the end. As the browser doesn't know if this might mean something special to the server, it should attempt to reload that changed URL whether it's cached or not. This will also make sure the file is reloaded in the production environment.
每当我对模板进行更改并且没有重新加载时，我都会在最后增加该数字。由于浏览器不知道这是否对服务器有特殊意义，因此无论是否缓存，它都应该尝试重新加载更改后的 URL。这也将确保在生产环境中重新加载文件。
回答by Ran Cohen
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.");
});
}
...
}
then when you call the refreshTemplate function you cause a re-load
然后当你调用 refreshTemplate 函数时，你会导致重新加载
