angularjs – Angular.js指令动态templateURL

前端之家收集整理的这篇文章主要介绍了angularjs – Angular.js指令动态templateURL前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在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>'
   }
});
原文链接:https://www.f2er.com/angularjs/147480.html

猜你在找的Angularjs相关文章