Conditionally adding data-attribute in Angular directive template

Question

I\'m working on the template for a directive. If a property in the scope is set to true, data-toggle=\"dropdown\" should be appended to the element. If the vari

Answer 1

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

will produce when isTrue=true : <span data-toggle="dropdown"></span>

and when isTrue=false : <span></span>

Answer 2

I think a good way could be to use ng-attr- followed by the expression you want to evaluate. In your case it would be something like:

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

Here's a fiddle with an example.

Answer 3

At the moment, there is no angular directive that allows you to remove or add an attribute conditionally. You can do ng-switch around the span, one with that attr and another one without it.

<div ng-switch on="condition">
<span data-toggle="dropdown" ng-switch-when="value"></span>
<span ng-switch-default></span>
</div>

or

<span data-toggle="dropdown" ng-if="expression"></span>
<span ng-if="!expression"></span>

You can also create a directive for that same purpose (adding/removing attrs conditionally) but that would be a bit more complicated.

Additionally if what you want is manage the scope variable inside the directive you can pass it as another attribute.

Example:

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