ng-includeで読み込んだパーシャルをキャッシュさせない

angularjsにてhtmlをパーシャルしたい場合は、ng-includeを使う。

<div ng-include="'views/home/sidebar/_issue_list.html'"></div>

パーシャルが常にcacheされてしまう

ただしこの場合、パーシャルの内容を更新してもIf-Modified-Sinceヘッダが働かないようで、 アプリケーションに更新内容が反映されないという問題がある。

開発時も毎回ブラウザキャッシュしなければならないのでつらい。

stackoverflowでも議論されているけれど、$templateCache.remove_all()しても効かない模様。

解決方法

そこで、directive化に加え、バージョン番号のクエリを付与することで
cacheさせずに常に最新の内容を読み込ませることが可能になる。

directive

# issue-list.js

(function() {

  angular
    .module('app')
    .directive('issuelist', issueList);

    function issueList() {
        var directive = {
            restrict: "A",
            templateUrl: `./views/home/sidebar/_issue_list.html?v=${new Date().getTime()}`
        }
        return directive;
    }

})();

呼び出し側

# home.html
<div issuelist></div>

開発時はタイムスタンプでもよいけれど、productionではビルド番号を指定するようにしておけば
ビルドしたときだけ読み込まれるようになる。

このエントリーをはてなブックマークに追加
Takatomo Honda avatar
About Takatomo Honda
システム開発 / プロトタイプ開発 / 開発組織の構築 / アプリケーションの内製化 /等、お気軽にご相談ください。