Angular.js指令动态templateURL [英] Angular.js directive dynamic templateURL

问题描述

我在这，对于指令模板调用 routeProvider 模板的自定义标签。在版本属性将通过其范围则合适的模板调用进行填充。

I have a custom tag in a routeProvider template that that calls for a directive template. The version attribute will be populated by the scope which then calls for the right template.

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

有基于它是什么星期几和赞美诗的多个版本。我期待用指令来填充正确的的.html 部分。该变量没有被阅读 templateUrl 。

There are multiple versions of the hymn based on what week and day it is. I was anticipating to use the directive to populate the correct .html portion. The variable is not being read by the 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
    }
});

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

There are multiple files in excerpts directory that are labeled before-1-monday.html, before-2-tuesday.html, …

推荐答案

您可以使用 NG-包括指令。

尝试是这样的：

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。观看版本属性

UPD. for watching ver attribute

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>'
   }
});

这篇关于Angular.js指令动态templateURL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！