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

Answer 2

以上解决方案非常棒，并且不适用于模板网址

function templateUrl: function($stataParams) { return '/serverUrl?id=' + $stataParams.id + '&cid=' + $stataParams.cid; }

由

修复

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

         return fromUrl(url, params);
     };

     return $delegate;
}

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

2 个答案: