Javascript 通过模型值设置角度指令名称

Javascript 通过模型值设置角度指令名称,javascript,angularjs,angular2-directives,Javascript,Angularjs,Angular2 Directives,我有一个循环,根据这个值,我需要指定一个特定的指令。以下是我得到的: <div ng-repeat="w in row.widgets" class="col-md-{{12/row.widgets.length}}"> <{{w.type}}> </{{w.type}}> </div> 问题是,我已经设置了匹配的指令,但是标记输出

我有一个循环,根据这个值,我需要指定一个特定的指令。以下是我得到的:

<div ng-repeat="w in row.widgets" class="col-md-{{12/row.widgets.length}}">
                    <{{w.type}}>
                    </{{w.type}}>
                </div>

问题是,我已经设置了匹配的指令,但是标记输出只是

<widget-directive-one>
<widget-directive-two>
<widget-directive-three>


我不明白为什么它不输出实际值,而不调用相同名称的指令。任何建议都将不胜感激

属性名和标记名不能在dom本身(视图)中动态生成

Angular需要能够解析dom中的元素,并将现有标记名或属性与这些指令进行比较


有很多方法可以做到这一点<代码>ng开关,
ng if
或返回所需指令标记的自定义指令是几个示例

向控制器$scope添加widgetType。然后你可以这样做:

<div ng-switch="widgetType">
  <widget-one ng-switch-when="widgetOne"></widget-one>
  <widget-two ng-switch-when="widgetTwo"></widget-two>
  <widget-three ng-switch-when="widgetThree"></widget-three>
</div>


如果

<div ng-repeat="w in row.widgets" class="col-md-{{12/row.widgets.length}}">
    <widget-directive-one ng-if="$index==0"></widget-directive-one>
    <widget-directive-two ng-if="$index==1"></widget-directive-two>
    <widget-directive-three ng-if="$index==2"></widget-directive-three>
</div>

使用
ng bind html
指令:

从文档中:

ngBindHtml 计算表达式并以安全的方式将结果HTML插入元素中

对于您知道安全的值,您也可以绕过消毒。为此,请通过绑定到显式信任的值。请参见下面的示例

--