关于angularjs：Angular.js指令动态templateURL


Angular.js directive dynamic templateURL

我在routeProvider模板中有一个自定义标记，它调用directive模板。version属性将由作用域填充，该作用域随后调用正确的模板。

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

这首赞美诗有多个版本，都是根据它是哪一周哪一天写的。我预计将使用该指令填充正确的.html部分。templateUrl没有读取该变量。

1
2
3
4
5
6
7
8
9
10
11
12
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…。

相关讨论

1
2
3
4
5
6
7
8
9
10
11
emanuel.directive('hymn', function() {
   return {
       restrict: 'E',
       link: function(scope, element, attrs) {
           // some ode
       },
       templateUrl: function(elem,attrs) {
           return attrs.templateUrl || 'some/path/default.html'
       }
   }
});

因此，您可以通过标记提供模板URL

1
<hymn template-url="contentUrl"><hymn>

现在，您只需注意属性ContentURL使用动态生成的路径填充。

相关讨论

您可以使用ng-include指令。

尝试如下操作：

1
2
3
4
5
6
7
8
9
10
11
emanuel.directive('hymn', function() {
   return {
       restrict: 'E',
       link: function(scope, element, attrs) {
           scope.getContentUrl = function() {
                return 'content/excerpts/hymn-' + attrs.ver + '.html';
           }
       },
       template: ''
   }
});

UPD。用于观察ver属性

1
2
3
4
5
6
7
8
9
10
11
12
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: ''
   }
});
相关讨论