Question

让我们说我有几条指令：＆＃34;戏剧＆＃34;，＆＃34;喜剧＆＃34;由于某种原因，他们有很多不同的属性，所以有一部电影＆＃34;并不一定有意义。指示。有没有办法根据范围变量动态评估指令？像这样：

<{{movieType}} movie="{{movie}}"></{{movieType}}>

它会评估为这样的东西：

<comedy movie={{movie}}></comedy>

我是Angular的新手，所以原谅疯狂的想法。

更新：实际上只是找到了一篇关于完全相同的问题/解决方案的简洁文章：http://onehungrymind.com/angularjs-dynamic-templates/

基本上，作者有一个指令，但根据请求交换模板：

var getTemplate = function(contentType) {
    var template = '';

    switch(contentType) {
        case 'image':
            template = imageTemplate;
            break;
        case 'video':
            template = videoTemplate;
            break;
        case 'notes':
            template = noteTemplate;
            break;
    }

    return template;
}

return {template: getTemplate(type)};

Answer 1

您可以在指令中使用模板函数：

 app.directive('movie', function(){
      return {
           restrict:'A',
           template: function(element, attr){
                 ... define templates, i.e. <comedy />
                 var contentType = attr.movie;
                 switch(contentType) {
                       case 'comedy':
                             template = comedyTemplate;
                             break;
                       case 'drama':
                             template = dramaTemplate;
                             break;
                       case 'suspense':
                              template = suspenseTemplate;
                             break;
                    }
                return template;
           }
      }
 })

使用此解决方案，无需手动编译。

Angular JS - 动态评估指令

1 个答案: