Отключить кэширование шаблонов в AngularJS с помощью ui-router

Я заметил, что время от времени я внес изменения в один из шаблонов в моем приложении AngularJS, и что во время выполнения это изменение не будет видно. Скорее, мне нужно будет обновить приложение, и если это не удастся, перейдите на путь самого шаблона и обновите его, чтобы увидеть это изменение.

Какой лучший способ предотвратить кэширование этих шаблонов? В идеале я бы хотел, чтобы они были кэшированы во время текущего использования приложения Angular, но при следующем загрузке страницы они извлекают последние и самые большие шаблоны без необходимости вручную обновлять.

Я использую ui-router, если это имеет значение здесь. Спасибо!

Ответ 1

Вы можете использовать декоратор и обновить UI Router $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]);

Ответ 2

Выше решение было отличным и не работало для шаблонов URL

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;
}