我正在为一个指令编写模板。如果作用域中的属性设置为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
的值将设置为"下拉"。如果isDropDown
为false,则data-toggle
的值将只是一个空字符串""
。但这似乎不起作用。
我认为一个好方法是使用ng-attr-
,后跟要计算的表达式。在您的情况下,它将类似于:
<span ng-attr-data-toggle="{{ isValueTrue ? 'toggle' : 'notToggle' }}"></span>
下面是一个小提琴的例子。
<span ng-attr-data-toggle="{{isTrue && 'dropdown' || undefined }}"></span>
将在isTrue=true时生成:<span data-toggle="dropdown"></span>
当isTrue=false时:<span></span>
目前,没有角度指令允许您有条件地删除或添加属性。你可以在跨度上切换,一个有属性,另一个没有属性。
<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>
您也可以为同样的目的创建一个指令(有条件地添加/删除属性),但这会有点复杂。
此外,如果您想要管理指令中的作用域变量,则可以将其作为另一个属性传递。
示例:
<span data-toggle="dropdown" when="isDropDown"></span>