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

я работаю над шаблоном для директивы. Если свойство в области имеет значение 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>

мое мышление с приведенным выше шаблоном заключается в том, что если переменная scope isDropDown истинно, то значение data-toggle будет установлен в "выпадающее меню". Если isDropDown false, тогда значение data-toggle будет просто пустой строкой "". Это, кажется, не работает, хотя.

3 62
angularjs angularjs-directive

3 ответа:

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

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

здесь скрипка С примером.

79

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

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

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

35

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

кроме того, если вы хотите управлять scope переменной внутри директивы вы можете передайте его как другой атрибут.

пример:

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