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

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

例如，如果scopevariables为true，模板应该呈现：

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

如果为false，模板应呈现：

 <span></span> 

模板看起来会是什么样子？

---

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

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

那么我的模板看起来像这样：

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

如果范围variablesisDropDown为false ，那么该模板将简单地呈现：

 <span></span> 

所以在模板中有一个方法来有条件地添加class="dropdown" 。 是否有模板的语法，使我有条件地添加data-toggle="dropdown" ？

---

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

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

我对上述模板的思考是，如果scopevariablesisDropDown为true，则data-toggle的值将被设置为“dropdown”。 如果isDropDown为false，那么data-toggle的值将只是一个空string"" 。 这似乎并没有工作。

Answer 1

我认为一个好的方法可能是使用ng-attr-后跟你想要评估的expression式。 在你的情况下，会是这样的：

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

这是一个例子的小提琴 。

Answer 2

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

当isTrue = true时会产生： <span data-toggle="dropdown"></span>

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

Answer 3

目前，没有angular度指令允许您有条件地删除或添加属性。 你可以做跨度的切换，一个是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> 

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

另外，如果你想要的是pipe理指令中的范围variables，你可以把它作为另一个属性来传递。

例：

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