javascript - 如何在同一个大括号 ({{ }}) 内动态渲染 javascript 数据和 html？

Question

我通过以下方式在同一 html 元素中呈现不同类型的属性:

Javascript:

var dataAttribute = {
    value:function(){ return 1;}
}
var listAttribute = {
    value:function(){ return "<div>My Arbitrary HTML
                                   <div>1</div>
                                   <div>2</div>
                                   <div>3</div>
                              </div>";}
}
var attributes = [dataAttribute,listAttribute]

HTML:

<div ng-repeat="attribute in attributes"> {{ attribute.value() }} </div>

如何让 listAttribute 中的 html 呈现为 HTML 而不是文本，同时仍然保留呈现 dataAttribute 的普通数据的能力？

Answer 1

你不应该这样做。如果您想根据集合中项目的属性呈现不同的内容，请使用 ng-switch 指令。 (在最坏的情况下，在 ng-repeat 中使用一系列 ng-if)

如果您已经在使用 Angular，请不要发明另一个模板引擎，您只会让自己感到困惑。

这里有更多解释。您已经拥有在某处生成该 html 的代码。通过 Angular Directive(指令)确实更好。

 <div ng-repeat="attribute in attributes" ng-switch="attribute.type"> 
   <div ng-switch-default> {{ attribute.value() }} </div>
   <div ng-switch-when="table"><my-table data='attribute.value()'></my-table></div>
   <div ng-switch-when="list"><my-list data='attribute.value()'></my-list></div>
</div>

和一组指令

 .directive('myTable', myTable).directive('myList', myList)

将保存从数据生成 html 的所有逻辑。

即不要将布局和数据混合在一个结构中。