5

我想根据变量选择要使用的指令。具体来说，我在一个列表中有几种不同类型的项目，所以我想使用项目类型来选择可以显示它的指令。

ng-switch 似乎是为此目的而设计的。然而，它将所有的开关选项添加到 DOM 中，然后除了一个之外隐藏了所有选项。如果要显示许多项目类型或长列表，这种方法似乎效率低下。此外，使用开关将逻辑放入 HTML 中。首选将是一个“策略模式”，它只会选择正确的指令，也许像

<display-{{item.type}} data="item.data" />

其中指令是“displayType1”、“displayType2”等。但是，这种语法似乎不起作用，可能是因为编译阶段和链接阶段之间的差异。这是一个在指令内切换 html 模板的示例。但是有没有办法切换指令，保持它们的模块化？

4

2 回答 2

5

根据@CodeGuy2001 建议添加解决方案。

这里采用的方法是为每个具有不同模板名称的指令变体创建一个角度模板。

然后使用ng-include选择需要使用的模板。由于ng-include支持数据绑定到src属性。您可以动态切换模板和指令。

请参阅实际操作中的小提琴http://jsfiddle.net/xpKwb/2/

于 2013-09-09T16:20:03.137 回答
1

我不知道添加这样的动态指令名称的方法。几个替代的想法：

1) 只需使用一个带有 item.type 作为参数的指令，并根据其值让指令的行为不同。

2) 使用 ng-if 代替 ng-switch，它实际上从 DOM 中删除元素而不是隐藏它（如 ng-hide 或 ng-switch）

于 2013-09-06T16:44:15.747 回答