¿Cuál es la mejor manera de aplicar atributos condicionalmente en AngularJS?

Necesito poder agregar, por ejemplo, "contenteditable" a los elementos, en función de una variable booleana en el alcance.

Ejemplo de uso:

<h1 attrs="{'contenteditable=\"true\"': editMode}">{{content.title}}</h1>

Resultaría en contenteditable = true que se agrega al elemento si $scope.editModese estableció en true. ¿Hay alguna manera fácil de implementar este comportamiento de atributo de clase ng? Estoy considerando escribir una directiva y compartirla si no.

Editar: Puedo ver que parece haber algunas similitudes entre mi directiva attrs propuesta y ng-bind-attrs, pero se eliminó en 1.0.0.rc3 , ¿por qué?

Estoy usando lo siguiente para establecer condicionalmente la clase attr cuando no se puede usar ng-class (por ejemplo, al diseñar SVG):

ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}"

El mismo enfoque debería funcionar para otros tipos de atributos.

(Creo que necesitas estar en el último Angular inestable para usar ng-attr-, actualmente estoy en 1.1.4)

Puede prefijar atributos con ng-attrpara evaluar una expresión angular. Cuando el resultado de las expresiones no está definido, esto elimina el valor del atributo.

<a ng-attr-href="{{value || undefined}}">Hello World</a>

Producirá (cuando el valor es falso)

<a ng-attr-href="{{value || undefined}}" href>Hello World</a>

Así que no lo use falseporque eso producirá la palabra "falso" como valor.

<a ng-attr-href="{{value || false}}" href="false">Hello World</a>

Al usar este truco en una directiva. Los atributos de la directiva serán falsos si les falta un valor.

Por ejemplo, lo anterior sería falso.

function post($scope, $el, $attr) {
      var url = $attr['href'] || false;
      alert(url === false);
}

Obtuve esto trabajando configurando el atributo. Y controlar la aplicabilidad del atributo utilizando el valor booleano para el atributo.

Aquí está el fragmento de código:

<div contenteditable="{{ condition ? 'true' : 'false'}}"></div>

Espero que esto ayude.

En la última versión de Angular (1.1.5), han incluido una directiva condicional llamada ngIf. Es diferente de ngShowy ngHideen que los elementos no están ocultos, pero no están incluidos en el DOM. Son muy útiles para componentes que son costosos de crear pero que no se usan:

<h1 ng-if="editMode" contenteditable=true>{{content.title}}</h1>

Para obtener un atributo que muestre un valor específico basado en una verificación booleana, o que se omita por completo si la verificación booleana falla, utilicé lo siguiente:

ng-attr-example="{{params.type == 'test' ? 'itWasTest' : undefined }}"

Ejemplo de uso:

<div ng-attr-class="{{params.type == 'test' ? 'itWasTest' : undefined }}">

Saldría <div class="itWasTest">o <div>basado en el valor deparams.type

<h1 ng-attr-contenteditable="{{isTrue || undefined }}">{{content.title}}</h1>

producirá cuando isTrue = true: <h1 contenteditable="true">{{content.title}}</h1>

y cuando isTrue = false: <h1>{{content.title}}</h1>

Con respecto a la solución aceptada, la publicada por Ashley Davis, el método descrito todavía imprime el atributo en el DOM, independientemente del hecho de que el valor que se le ha asignado no está definido.

Por ejemplo, en una configuración de campo de entrada con un modelo ng y un atributo de valor:

<input type="text" name="myInput" data-ng-attr-value="{{myValue}}" data-ng-model="myModel" />

Independientemente de lo que esté detrás de myValue, el atributo de valor todavía se imprime en el DOM, por lo tanto, se interpreta. Ng-model entonces, se anula.

Un poco desagradable, pero usar ng-if funciona:

<input type="text" name="myInput" data-ng-if="value" data-ng-attr-value="{{myValue}}" data-ng-model="myModel" />
<input type="text" name="myInput" data-ng-if="!value" data-ng-model="myModel" />

Recomendaría usar una verificación más detallada dentro de las directivas ng-if :)

También puedes usar una expresión como esta:

<h1 ng-attr-contenteditable="{{ editMode ? true : false }}"></h1>

De hecho, escribí un parche para hacer esto hace unos meses (después de que alguien me lo preguntó en #angularjs en freenode).

Probablemente no se fusionará, pero es muy similar a ngClass: https://github.com/angular/angular.js/pull/4269

Ya sea que se fusione o no, el material ng-attr- * existente probablemente sea adecuado para sus necesidades (como otros han mencionado), aunque podría ser un poco más complicado que la funcionalidad más ngClass-style que está sugiriendo.

Para la validación del campo de entrada puede hacer:

<input ng-model="discount" type="number" ng-attr-max="{{discountType == '%' ? 100 : undefined}}">

Esto se aplicará el atributo maxde 100sólo si discountTypese define como%

Editar : ¡Esta respuesta está relacionada con Angular2 +! Lo siento, me perdí la etiqueta!

Respuesta original:

En cuanto al caso muy simple cuando solo desea aplicar (o establecer) un atributo si se estableció un cierto valor de entrada, es tan fácil como

<my-element [conditionalAttr]="optionalValue || false">

Es lo mismo que:

<my-element [conditionalAttr]="optionalValue ? optionalValue : false">

(Por lo tanto, opcionalValue se aplica si se da lo contrario, la expresión es falsa y el atributo no se aplica).

Ejemplo: tuve el caso, donde dejé aplicar un color pero también estilos arbitrarios, donde el atributo de color no funcionaba como ya estaba establecido (incluso si no se proporcionó el color @Input ()):

@Component({
  selector: "rb-icon",
  styleUrls: ["icon.component.scss"],
  template: "<span class="ic-{{icon}}" [style.color]="color==color" [ngStyle]="styleObj" ></span>",
})
export class IconComponent {
   @Input() icon: string;
   @Input() color: string;
   @Input() styles: string;

   private styleObj: object;
...
}

Por lo tanto, "style.color" solo se estableció cuando el atributo de color estaba allí; de lo contrario, se podría usar el atributo de color en la cadena "styles".

Por supuesto, esto también podría lograrse con

[style.color]="color" 

y

@Input color: (string | boolean) = false;

En caso de que necesite una solución para Angular 2, entonces es simple, use el enlace de propiedades como se muestra a continuación, por ejemplo, si desea que la entrada se lea solo condicionalmente, luego agregue entre corchetes el atributo seguido de = signo y expresión.

<input [readonly]="mode=='VIEW'"> 

Pude hacer que esto funcionara:

ng-attr-aria-current="{{::item.isSelected==true ? 'page' : undefined}}"

Lo bueno aquí es que si item.isSelected es falso, entonces el atributo simplemente no se representa.