在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为true,则值data-toggle将设置为"dropdown".如果isDropDown为false,那么value 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>