$modal.open 缓存 UI 的旧副本

Question

我正在打开一个带有以下内容的模式对话框：

    var modalInstance = $modal.open({
        animation: false,
        templateUrl: '../templates/ResponseModal.html',
        controller: 'ModalResponseCtrl',
        size: 'lg',
        resolve: {
            response: function () {
                return selResponse;
            },
            cmt: function () {
                return cmt;
            }
        }
    });

一切正常。但是，如果我更改服务器上的ResponseModal.html，浏览器将永远不会重新读取该文件。浏览器控制台没有显示尝试读取它，甚至没有检查它是否已更改。不知何故，ResponseModal.html 文件的旧副本被缓存在内存中，我不知道如何清除它并强制它再次读取。我通常使用“shift-refresh”来强制浏览器重新获取所有部分——但这并不适用。完全关闭浏览器并重新启动它不会清除缓存。删除所有历史作品，但这很激烈。

有没有一种更简单的方法来说服 $modal 机制忘记旧的缓存副本，并从服务器重新读取新的副本？

Answer 1

jbrown 的评论是绝对正确的（在 Chrome 中更容易，只需打开检查器，它会在打开时自动禁用缓存），但是有时您不希望这些 .html 文件完全缓存，因为它们可以在生产环境中可能发生变化（或生成）。

假设您使用的是 Apache，我在这个用例中发现使用 .htaccess 可以很好地禁用某些视图文件的缓存。老实说，在今天它不是提供导致服务器负载的 .html 文件，而是动态数据驱动的东西。这是一种使用 .htaccess 禁用（几乎所有）简单 .html 部分缓存的简单方法

ExpiresActive On
ExpiresByType text/html "access plus 1 minute"

这可以阻止它泛滥，但也可以确保它会在合理的时间范围内要求页面的新版本。仅仅因为涉及时间因素，它本身就有缺陷，但根据我在类似用例中的经验，这很有效。

Answer 2

任何时候你在 Angular 中看到/使用templateUrl，想想$templateCache。第一次下载 HTML 模板后，它会存储在 $templateCache 服务中，并且不会通过正常的应用程序交互再次更新。

根据您的 Expires 和 Cache-Control 标头，强制重新加载可能不起作用。最好的办法是在浏览器的调试窗口如上所示打开时禁用浏览器的缓存。

尽管您应该理解您仍然应该对您的应用程序进行开发测试，因为普通用户会使用您的应用程序而不是依赖于刷新的缓存。