在Angular指令模板中有条件地添加数据属性

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>

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

<span></span>

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

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

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

我对上述模板的想法是，如果scope变量isDropDown为true，则将value data-toggle设置为“
dropdown”。如果isDropDown为false，则的值data-toggle将只是一个空字符串""。但这似乎不起作用。

Answer 1

我认为一种好方法是在ng-attr-要评估的表达式后使用。在您的情况下，它将类似于：

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

这是一个[fiddle](http://jsfiddle.net/gleezer/sCC72/2/)例子。