Изменить URL-адрес источника на $includeContentRequested

Я хочу изменить URL-адрес каждый раз, когда директива ng-include запрашивает частичную. Пока я могу видеть URL-адрес и событие следующим образом:

app.run(function ($rootScope) {
    $rootScope.$on('$includeContentRequested', function (event, url) {
        console.log(event);
        console.log(url);
    });
});

Теперь мне нужно изменить URL-адрес от 'templates/incs/includedPartial.html' до 'templates/incs/includedPartial.html?cache_version=1_1', а затем включить частичное с новой ссылкой.

Очевидно, я делаю это, чтобы предотвратить проблемы с кешированием при изменении версии. Это хорошая стратегия или есть лучшее решение? Заранее спасибо за любую помощь...

Ответ 1

Думаю, я действительно понял ответ на этот вопрос. Что вы можете сделать, так это создать перехватчик. Поскольку все запросы с ng-include действительно проходят через общий $httpProvider, вы можете перехватить запрос и добавить кэш-буфера.

app.factory( "cacheBusterFactory", [ "VERSION", function( VERSION ) {
    return {
        request: function( config ) {
            if( config.url.indexOf( ".html", config.url.length - ".html".length ) !== -1 ) {
                config.url += "?v=" + VERSION.toString();
            }

            return config;
        }
    };
} ] );

"ВЕРСИЯ" в этом случае является константой angular, которую я изменяю при каждом развертывании:

app.constant( "VERSION", 0.1 );

И добавление кэша-битера так же просто, как:

.config( [ "$httpProvider", function( $httpProvider ) {
    $httpProvider.interceptors.push( "cacheBusterFactory" );
} ] )

Как вы можете видеть, я только перехватываю .html файлы, так как это единственные, что мне нужно для добавления кэша. Разумеется, вы могли бы расширить или перестроить "cacheBusterFactory" в соответствии с вашими потребностями.

Ответ 2

У меня возникла проблема с $templateCache и предопределенными шаблонами (например, UI Bootstrap). Я решил это, проверив кеш.

app.factory( "cacheBusterFactory", [ "$templateCache", "VERSION", function( $templateCache, VERSION ) {
    return {
       request: function( config ) {
           if( config.cache === $templateCache
               && !angular.isDefined($templateCache.get(config.url))) !== -1 ) {
               config.url += "?v=" + VERSION.toString();
            }

            return config;
        }
    };
} ] );