在Angular指令模板中有条件地添加data-attribute

Question

我正在处理指令的模板。如果范围中的属性设置为true，则应将data-toggle="dropdown"附加到元素。如果变量为false，则此数据属性不应呈现为元素的属性。

例如，如果scope变量为true，则模板应呈现：

<span data-toggle="dropdown"></span>

如果为false，则模板应呈现：

<span></span>

模板的外观是什么样的？

---

例如，我知道我可以使用ng-class有条件地包含一个类。如果我想让模板呈现这个：

<span class="dropdown"></span>

然后我的模板看起来像这样：

"<span ng-class="{ 'dropdown': isDropDown }"></span>

如果范围变量isDropDown为false，则模板将简单地呈现：

<span></span>

因此，模板中有一种方法可以有条件地添加class="dropdown"。是否有模板语法允许我有条件地添加data-toggle="dropdown"？

---

我为模板尝试过的一件事是：

"<span data-toggle="{ 'dropdown': isDropDown }"></span>

我对上述模板的思考是，如果范围变量isDropDown为真，则data-toggle的值将设置为“下拉列表”。如果isDropDown为false，则data-toggle的值只是一个空字符串""。但这似乎不起作用。

Answer 1

我认为一个好方法可能是使用ng-attr-，然后使用您要评估的表达式。 在你的情况下，它将是这样的：

<span ng-attr-data-toggle="{{ isValueTrue ? 'toggle' : 'notToggle' }}"></span>

这是一个 fiddle 的例子。

Answer 2

<span ng-attr-data-toggle="{{isTrue && 'dropdown' || undefined }}"></span>

当isTrue = true时，

将产生： <span data-toggle="dropdown"></span>

当isTrue = false时： <span></span>

Answer 3

目前，没有角度指令允许您有条件地删除或添加属性。您可以围绕跨度进行ng-switch，一个使用该attr，另一个使用attr。

<div ng-switch on="condition">
<span data-toggle="dropdown" ng-switch-when="value"></span>
<span ng-switch-default></span>
</div>

或

<span data-toggle="dropdown" ng-if="expression"></span>
<span ng-if="!expression"></span>

你也可以为同样的目的创建一个指令（有条件地添加/删除attrs），但这会有点复杂。

此外，如果您想要的是管理指令中的范围变量，您可以将其作为另一个属性传递。

示例：

<span data-toggle="dropdown" when="isDropDown"></span>