Я работаю над шаблоном для директивы. Если для свойства в области задано значение 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 будет просто пустой строкой "". Однако это не работает.
Я думаю, что хорошим способом может быть использование ng-attr-, за которым следует выражение, которое вы хотите оценить.
В вашем случае это будет что-то вроде:
<span ng-attr-data-toggle="{{ isValueTrue ? 'toggle' : 'notToggle' }}"></span>
Здесь a fiddle с примером.
<span ng-attr-data-toggle="{{isTrue && 'dropdown' || undefined }}"></span>
будет выдавать, когда isTrue = true:
<span data-toggle="dropdown"></span>
и когда isTrue = false:
<span></span>
В настоящее время нет директивы 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>