使用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]);