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