有条件的指令选择

时间:2013-09-06 15:56:28

标签: angularjs angularjs-directive

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

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

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

其中指令是'displayType1','displayType2'等等。但是,这种语法似乎不起作用,可能是因为编译阶段和链接阶段之间存在差异。 Here是一个在指令中切换html模板的示例。但有没有办法切换指令,保留其模块性?

2 个答案:

答案 0 :(得分:5)

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

此处采用的方法是使用不同的模板名称为每个指令变体创建一个角度模板。

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

请参阅行动中的小提琴http://jsfiddle.net/xpKwb/2/

答案 1 :(得分:1)

我不知道添加动态指令名称的方法。一些不同的想法:

1)只需使用一个带有item.type的指令作为参数,并使指令的行为取决于它的值。

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