将angular指令动态插入HTML

Question

我的角度模块中有许多指令，这些指令命名为：MyDirective1，MyDirective2，...，MyDirectiveN

我还维护一个指令名列表：MyDirectiveList：[＆＃39; MyDirective1＆＃39;，＆＃39; MyDirective2＆＃39;，...，＆＃39; MyDirectiveN＆＃39;]

在HTML中，我想显示一个基于变量（selectedDirective）的指令，该变量包含指令名称（使用ng-if或ng-show）。

<div ng-repeat="directiveName in MyDirectiveList">

   <div ng-if="selectedDirective == directiveName">

   ...directive shall go in here...

   </div>

</div>

我可以在控制器中使用$ injector和$ compile插入元素但是我想知道是否有更多的角度方式直接在带有angular指令的html中执行此操作。

Answer 1

由于您正在操作DOM，因此您应该使用指令。

好吧，你可以回复ng-repeat和ng-if指令，你是对的。但你刚才正在召集军队，因为有人偷了你的钱包。

最好的解决方案似乎是提出here的解决方案，即一条指令来统治它们。

这个解决方案有两个原因：

1）你不再能够创建并且不显示一千个DOM对象只是为了显示一个。

2）如果您的指令需要，您可以传递自定义数据json（请注意，您只能通过一个唯一的json传递它，而不能适应您指令的需要，即具有智能双向数据绑定的多个字段）。