[解決済み] Angular.jsディレクティブの動的テンプレートURL

質問内容

カスタムタグを routeProvider を呼び出すテンプレートがあります。 directive テンプレートがあります。その version 属性はスコープによって入力され、適切なテンプレートが呼び出されます。

<hymn ver="before-{{ week }}-{{ day }}"></hymn>

讃美歌は何曜日かによって、複数のバージョンがあります。私は、このディレクティブを使って、正しい .html の部分です。変数が読み込まれないのは templateUrl .

emanuel.directive('hymn', function() {
    var contentUrl;
    return {
        restrict: 'E',
        link: function(scope, element, attrs) {
            // concatenating the directory to the ver attr to select the correct excerpt for the day
            contentUrl = 'content/excerpts/hymn-' + attrs.ver + '.html';
        },
        // passing in contentUrl variable
        templateUrl: contentUrl
    }
});

excerptsディレクトリには、次のようなラベルの付いたファイルが複数あります。 before-1-monday.html , before-2-tuesday.html , ...

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

を使用することができます。 ng-include ディレクティブを使用します。

こんな感じにしてみてください。

emanuel.directive('hymn', function() {
   return {
       restrict: 'E',
       link: function(scope, element, attrs) {
           scope.getContentUrl = function() {
                return 'content/excerpts/hymn-' + attrs.ver + '.html';
           }
       },
       template: '<div ng-include="getContentUrl()"></div>'
   }
});

UPD.視聴用 ver 属性

emanuel.directive('hymn', function() {
   return {
       restrict: 'E',
       link: function(scope, element, attrs) {
           scope.contentUrl = 'content/excerpts/hymn-' + attrs.ver + '.html';
           attrs.$observe("ver",function(v){
               scope.contentUrl = 'content/excerpts/hymn-' + v + '.html';
           });
       },
       template: '<div ng-include="contentUrl"></div>'
   }
});