ngclass - ng class in angularjs
Agregar condicionalmente data-attribute en la plantilla de directiva angular (3)
Creo que una buena manera podría ser usar ng-attr- seguido de la expresión que desea evaluar. En tu caso, sería algo así como:
<span ng-attr-data-toggle="{{ isValueTrue ? ''toggle'' : ''notToggle'' }}"></span>
Aquí hay un fiddle con un ejemplo.
Estoy trabajando en la plantilla para una directiva. Si una propiedad en el alcance se establece en verdadero, data-toggle="dropdown" debe anexar al elemento. Si la variable es falsa, este atributo de datos no debe representarse como un atributo del elemento.
Por ejemplo, si la variable de ámbito es verdadera, la plantilla debería representar:
<span data-toggle="dropdown"></span>
Si es falso, la plantilla debe representar:
<span></span>
¿Cómo se vería la plantilla para lograr esto?
Por ejemplo, sé que puedo usar ng-class para incluir condicionalmente una clase. Si quiero que la plantilla represente esto:
<span class="dropdown"></span>
Entonces mi plantilla se vería así:
"<span ng-class="{ ''dropdown'': isDropDown }"></span>
Si la variable de ámbito es isDropDown es false , la plantilla simplemente procesará:
<span></span>
De modo que hay una forma en una plantilla para agregar condicionalmente un class="dropdown" . ¿Hay una sintaxis para las plantillas que me permita añadir de manera condicional data-toggle="dropdown" ?
Una de las cosas que he probado para la plantilla es:
"<span data-toggle="{ ''dropdown'': isDropDown }"></span>
Mi pensamiento con la plantilla anterior es que si la variable de ámbito es isDropDown es verdadera, el valor de data-toggle se establecerá en "menú desplegable". Si isDropDown es falso, entonces el valor de data-toggle simplemente sería una cadena vacía "" . Sin embargo, eso no parece funcionar.
Por el momento, no existe una directiva angular que le permita eliminar o agregar un atributo condicionalmente. Puedes hacer ng-switch alrededor del span, uno con ese attr y otro sin él.
<div ng-switch on="condition">
<span data-toggle="dropdown" ng-switch-when="value"></span>
<span ng-switch-default></span>
</div>
o
<span data-toggle="dropdown" ng-if="expression"></span>
<span ng-if="!expression"></span>
También puede crear una directiva para ese mismo propósito (agregar / eliminar atributos condicionalmente) pero eso sería un poco más complicado.
Además, si lo que quiere es administrar la variable de ámbito dentro de la directiva, puede pasarla como otro atributo.
Ejemplo:
<span data-toggle="dropdown" when="isDropDown"></span>
<span ng-attr-data-toggle="{{isTrue && ''dropdown'' || undefined }}"></span>
producirá cuando isTrue = true: <span data-toggle="dropdown"></span>
y cuando isTrue = false: <span></span>