Angular.js指令动态模板URL

Question

我在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
    }
});

有在摘录目录多个文件被标记before-1-monday.html，before-2-tuesday.html…

Answer 1

您可以使用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>'
   }
});