¿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.
Uso de ejemplo:
<h1 attrs="{'contenteditable=\"true\"': editMode}">{{content.title}}</h1>
Daría como resultado que se agregue contenteditable=true al elemento si $scope.editModese establece en true. ¿Existe alguna manera fácil de implementar este comportamiento de atributo similar a la 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 el atributo de clase 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 tener la última versión de Angular inestable para usar ng-attr-, actualmente estoy en 1.1.4)
Puede anteponer atributos a 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 sea 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);
}
