angularjs – Angular.js指令动态templateURL

发布时间：2020-12-17 09:22:46 所属栏目：安全来源：网络整理

导读：我在routeProvider模板中有一个自定义标签，它需要一个指令模板。版本属性将由范围填充，然后调用正确的模板。 hymn ver="before-{{ week }}-{{ day }}"/hymn 有多个版本的赞美诗基于什么星期和日子。我期待使用该指令填充正确的.html部分。该变量未被templa

我在routeProvider模板中有一个自定义标签，它需要一个指令模板。版本属性将由范围填充，然后调用正确的模板。

<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',attrs) {
           scope.getContentUrl = function() {
                return 'content/excerpts/hymn-' + attrs.ver + '.html';
           }
       },template: '<div ng-include="getContentUrl()"></div>'
   }
});

UPD。用于监视ver属性

emanuel.directive('hymn',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>'
   }
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!