如何在角度模板中动态插入不相同的模板？

Question

假设我有一个从节点服务器接收 json 的客户端。 json 将包含有关要显示的媒体数量和类型的信息数组。

{"feed":{"data":[         
    {"id":"1","type":"image",
     "image1":"image1Url",
     "image2":"image2Url"
    }, 
    {"id":"2","type":"mixed",
     "image1":"image1Url",
     "video1":"video1Url",
     "image2":"image2Url"
    },
    {"id":"3","type":"message",
     "message1":"Hello",
     "message2":"Qwerty"
    }
]}}

客户端会根据信息填充一个 html div，然后将其附加到父组件。

例如，

对于 id 1，div 模板将包含 2 张图片。

对于 id 2，div 模板将包含一个图像、一个视频和一个图像。

对于 id 3，div 模板将包含两个文本字段。

所有 div 模板随后将附加到托管组件。

---

我可以动态创建 html 并使用 jQuery 将它们附加到主机。

写一个这样的函数。

function populateAttachmentCard(i,platform,type,message,dateStamp,name,imageSrc,finalListElement){
    var attachmentFragment='';
    if(finalListElement.attachments.data[0].subattachments){
        subAttachmentLength= finalListElement.attachments.data[0].subattachments.data.length;
        for(var j=0; j<subAttachmentLength; j++){
            var attachmentType = finalListElement.attachments.data[0].subattachments.data[j].type;
            if(attachmentType=='photo' || attachmentType=='image'){
                var imageSrc= finalListElement.attachments.data[0].subattachments.data[j].media.image.src; 
                attachmentFragment= attachmentFragment + '<img src='+imageSrc+' class="card-img-top" alt="images/picture.svg" height="auto" width="300px" style="padding-top: 10px">';
            }
            else if(attachmentType=='video'){
                var mediaSrc= finalListElement.attachments.data[0].subattachments.data[j].media.source;
                attachmentFragment= attachmentFragment + '<video class="card-img-top" alt="images/picture.svg" height="auto" width="auto" style="padding-top: 10px" controls>'+
                    '<source src='+mediaSrc+' type="video/mp4">'+               
                '</video>';
            }
        }
        console.log('attachmentFragment:', attachmentFragment);
    }else if(finalListElement.attachments){
        var attachmentType = finalListElement.attachments.data[0].media_type;
        if(attachmentType=='photo' || attachmentType=='image'){
            var imageSrc= finalListElement.attachments.data[0].media.image.src; 
            attachmentFragment= attachmentFragment + '<img src='+imageSrc+' class="card-img-top" alt="images/picture.svg" height="auto" width="300px" style="padding-top: 10px">';
        }
        else if(attachmentType=='video'){
            var mediaSrc= finalListElement.attachments.data[0].media.source;
            attachmentFragment= attachmentFragment + '<video class="card-img-top" alt="images/picture.svg" height="auto" width="auto" style="padding-top: 10px" controls>'+
                '<source src='+mediaSrc+' type="video/mp4">'+                   
            '</video>';
        }
        else if(attachmentType=='link'){
            var mediaSrc= finalListElement.attachments.data[0].media.source;
            attachmentFragment= attachmentFragment + '<video class="card-img-top" alt="images/picture.svg" height="auto" width="auto" style="padding-top: 10px" controls>'+
                '<source src='+mediaSrc+' type="video/mp4">'+                   
            '</video>';
        }
    }

    $('#content').append(
        '<div class="card w-50" style="width: 18rem;">'+
            '<div class="card-header">'+
                i+'. '+platform+', '+type+
            '</div>'+
            //'<img src='+imageSrc+' class="card-img-top" alt="images/picture.svg" height="auto" width="300px" style="padding-top: 10px">'+
            attachmentFragment+  
            '<div class="card-body">'+
                '<p class="card-text">'+
                    message+
                '</p>'+
                '<blockquote class="blockquote mb-0">'+
                    '<footer class="blockquote-footer">'+
                        dateStamp+', '+
                        '<cite title="Source Title">'+
                            name+
                        '</cite>'+
                    '</footer>'+
                '</blockquote>'+
            '</div>'+
        '</div>'
    )
}

但是，我正在使用 angularjs，并且从我的控制器 jQuery 似乎无法正常工作。我正在查看 Angular 的动态组件加载器教程，但似乎只能使用静态模板。

假设我是 angularjs 和 web 开发的初学者。

Answer 1

使用ng-switch 指令。

<div ng-repeat="item in feed.data">
    <div ng-switch="item.type">
        <div ng-switch-when="image">
            <img src="{{item.image1}}" />
            <!-- ... -->
        </div>
        <div ng-switch-when="mixed">
            <!-- ... -->
        </div>            
        <div ng-switch-when="message">
            <!-- ... -->
        </div>
        <div ng-switch-default>
            <!-- ... -->
        </div>
    </div>
</div>

有关详细信息，请参阅

• AngularJS ng-switch Directive API Reference