Question

我有一个基于值的循环，我需要指定一个特定的指令。这就是我所拥有的：

<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>

我不明白为什么而不是输出实际值，它不会调用同名的指令。任何建议将不胜感激！

Answer 1

属性名称和标记名称不能在dom本身（视图）中动态生成。

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

有很多方法可以解决这个问题... ng-switch，ng-if或返回所需指令标记的自定义指令是几个例子

Answer 2

将widgetType添加到控制器$ scope。然后你可以做这样的事情：

<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>

Answer 3

使用此 ng-if

{{1}}

Answer 4

使用template: '<h1 *ngIf="teacher">{{teacher.firstname}}</h1>'指令：

来自文档：

ngBindHtml

评估表达式并以安全的方式将生成的HTML插入元素中。

您也可以绕过您知道安全的值的清理工作。为此，请通过$sce.trustAsHtml绑定到显式受信任的值。请参阅Strict Contextual Escaping (SCE)下的示例。

- AngularJS ng-bind-html Directive API Reference

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

4 个答案:

ngBindHtml