javascript - 在 AngularJS 中刷新服务器生成的模板

Question

我的部分内容之一是报告 - 仅供查看和打印的姓名和日期的静态列表。

由于在服务器端呈现报告效率更高，我的 API 为报告请求发回 HTML 而不是 JSON。报告路由中的模板 URL 是该 API 调用:

.when('/report', {
    templateUrl: 'api/report',
});

报告显示在正确的 URL 上，但是当我转到另一条路线并更改数据时，报告没有重新加载。我尝试在 API 响应中设置 no-cache header ，但没有效果。

是否有强制 Angular 刷新某些模板的最佳实践？

Answer 1

Angular 有一个内部模板缓存，由 $templateCache 服务提供服务。从服务器获取模板后，它的引用和内容被缓存在 Angular 中，而不是从服务器重新请求它。

$templateCache 服务有两个与您的情况相关的方法 - .remove("templateUrl") 和 .removeAll()。在您想要删除特定模板的情况下，您显然可以使用 .remove(templateUrl) 方法。

这可以在 Controller (加载时已经加载模板)或更一般的事件中完成，例如全局 $routeChangeSuccess 事件。例如:

module.run(["$templateCache", function ($templateCache) {
    $rootScope.$on("$routeChangeSuccess", function (event, current, previous) {
        $templateCache.remove(current.$$route.templateUrl);
    });
}]);

虽然这会清除 Angular 缓存中的特定条目，但您仍然需要确保您的服务器在模板响应中设置了适当的 header ，以便在从服务器请求它时，浏览器不会缓存它。

在另一种情况下，如果您不想在 Angular 中缓存任何模板，您可以绑定(bind)全局 $includeContentLoaded 和 $routeChangeStart 事件并调用 $templateCache.removeAll() 以确保没有模板被缓存。