强制重新加载指令的模板

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'];?

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

要阻止您的浏览器缓存模板(引自此Google网上论坛帖子,确切地说是关于此问题):

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

这修复了我们所有的部分/模板缓存问题.