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

Question

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

例如，如果范围变量为 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，则 data-toggle 的值将只是一个空字符串 ""。但这似乎不起作用。

Answer 1

我认为一个好方法可能是使用 ng-attr- 后跟您想要计算的表达式。在你的情况下，它会是这样的:

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

这是一个 fiddle 举个例子。