Условно добавление атрибута данных в шаблон шаблона Angular

Я работаю над шаблоном для директивы. Если для свойства в области задано значение true, к элементу должен быть добавлен data-toggle="dropdown". Если переменная является ложной, этот атрибут данных не должен отображаться как атрибут элемента.

Например, если переменная 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>

Мое мышление с приведенным выше шаблоном заключается в том, что если переменная scope isDropDown равна true, значение data-toggle будет установлено в "dropdown". Если isDropDown является ложным, то значение data-toggle будет просто пустой строкой "". Однако это не работает.

ОТВЕТЫ

Ответ 1

Я думаю, что хорошим способом может быть использование ng-attr-, за которым следует выражение, которое вы хотите оценить. В вашем случае это будет что-то вроде:

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

Здесь a fiddle с примером.

Ответ 2

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

будет выдавать, когда isTrue = true: <span data-toggle="dropdown"></span>

и когда isTrue = false: <span></span>

Ответ 3

В настоящее время нет директивы angular, которая позволяет удалить или добавить атрибут условно. Вы можете сделать ng-переключатель вокруг диапазона, один с этим 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>