angularjs - 使用 ui-router 在 AngularJS 中禁用模板缓存

Question

我注意到有时我会对我的 AngularJS 应用程序中的模板之一进行更改，但在运行时，更改将不可见。相反，我必须刷新应用程序，如果失败，请转到模板本身的路径并刷新它以查看此更改。

防止像这样缓存这些模板的最佳方法是什么？理想情况下，我希望在当前使用 Angular 应用程序期间缓存它们，但是下次我加载页面时，它们会检索最新和最好的模板，而无需手动刷新。

如果这有什么不同，我正在使用 ui-router。谢谢!

Answer 1

您可以使用装饰器并更新 UI 路由器的 $templateFactory 服务以将后缀附加到 templateUrl

function configureTemplateFactory($provide) {
    // Set a suffix outside the decorator function 
    var cacheBuster = Date.now().toString();

    function templateFactoryDecorator($delegate) {
        var fromUrl = angular.bind($delegate, $delegate.fromUrl);
        $delegate.fromUrl = function (url, params) {
            if (url !== null && angular.isDefined(url) && angular.isString(url)) {
                url += (url.indexOf("?") === -1 ? "?" : "&");
                url += "v=" + cacheBuster;
            }

            return fromUrl(url, params);
        };

        return $delegate;
    }

    $provide.decorator('$templateFactory', ['$delegate', templateFactoryDecorator]);
}

app.config(['$provide', configureTemplateFactory]);