[解決済み] Angular ディレクティブのテンプレート URL を .js ファイルに相対的に指定する。

質問

いくつかの異なる場所で使用されるangularディレクティブを構築しています。 ディレクティブが使用されるアプリのファイル構造を常に保証することはできませんが、ユーザーに強制的に directive.js と directive.html (実際のファイル名ではありません)を同じフォルダに保存します。

を評価するとき、ページが directive.js を評価するとき、それは templateUrl は自分に対する相対的なものであると考えます。を設定することは可能でしょうか？ templateUrl に対して相対的であるように directive.js ファイルへの相対パスを指定しますか？

それとも、ディレクティブ自体にテンプレートを含めることだけが推奨されるのでしょうか。

私は、異なる状況に基づいて異なるテンプレートをロードしたいと思うかもしれないと思います。 directive.js

どのように解決するのですか？

現在実行中のスクリプトファイルは、常にscripts配列の最後の1つになるため、そのパスを簡単に見つけることができます。

// directive.js

var scripts = document.getElementsByTagName("script")
var currentScriptPath = scripts[scripts.length-1].src;

angular.module('app', [])
    .directive('test', function () {
        return {
            templateUrl: currentScriptPath.replace('directive.js', 'directive.html')
        };
    });

スクリプト名がわからない場合（複数のスクリプトを一つにまとめている場合など）、これを使います。

return {
    templateUrl: currentScriptPath.substring(0, currentScriptPath.lastIndexOf('/') + 1) 
        + 'directive.html'
};

備考 : クロージャを使う場合、currentScriptが正しいタイミングで評価されるように、コードの外側で以下のような工夫をする必要があります。

// directive.js

(function(currentScriptPath){
    angular.module('app', [])
        .directive('test', function () {
            return {
                templateUrl: currentScriptPath.replace('directive.js', 'directive.html')
        };
    });
})(
    (function () {
        var scripts = document.getElementsByTagName("script");
        var currentScriptPath = scripts[scripts.length - 1].src;
        return currentScriptPath;
    })()
);