Qual é a melhor maneira de aplicar condicionalmente atributos no AngularJS?

Eu preciso ser capaz de adicionar, por exemplo, "contenteditable" aos elementos, com base em uma variável booleana no escopo.

Exemplo de uso:

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

Resultaria na adição de contenteditable = true ao elemento se $scope.editModeestivesse definido como true. Existe alguma maneira fácil de implementar esse comportamento de atributo da classe ng? Estou pensando em escrever uma diretiva e compartilhar, se não.

Edit: Eu posso ver que parece haver algumas semelhanças entre minha diretiva attrs proposta e ng-bind-attrs, mas ela foi removida em 1.0.0.rc3 , por que?

Estou usando o seguinte para definir condicionalmente a classe attr quando a classe ng não puder ser usada (por exemplo, ao estilizar SVG):

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

A mesma abordagem deve funcionar para outros tipos de atributos.

(Eu acho que você precisa estar no mais recente Angular instável para usar ng-attr-, atualmente estou no 1.1.4)

Você pode prefixar atributos com ng-attrpara avaliar uma expressão Angular. Quando o resultado das expressões indefinidas, isso remove o valor do atributo

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

Produzirá (quando o valor for falso)

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

Portanto, não use, falseporque isso produzirá a palavra "false" como o valor.

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

Ao usar esse truque em uma diretiva. Os atributos para a diretiva serão falsos se estiverem faltando um valor.

Por exemplo, o acima seria falso.

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

Eu consegui isso trabalhando definindo muito bem o atributo. E controlando a aplicabilidade do atributo usando o valor booleano do atributo.

Aqui está o trecho de código:

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

Eu espero que isso ajude.

Na versão mais recente do Angular (1.1.5), eles incluíram uma diretiva condicional chamada ngIf. É diferente ngShowe ngHideporque os elementos não estão ocultos, mas não estão incluídos no DOM. Eles são muito úteis para componentes que são caros de criar, mas não são usados:

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

Para obter um atributo para mostrar um valor específico com base em uma verificação booleana ou ser totalmente omitido se a verificação booleana falhar, usei o seguinte:

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

Exemplo de uso:

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

Saída <div class="itWasTest">ou com <div>base no valor deparams.type

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

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

e quando isTrue = false: <h1>{{content.title}}</h1>

Em relação à solução aceita, a postada por Ashley Davis, o método descrito ainda imprime o atributo no DOM, independentemente do fato de que o valor que foi atribuído é indefinido.

Por exemplo, em uma configuração de campo de entrada com um atributo ng-model e value:

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

Independentemente do que está por trás do myValue, o atributo value ainda é impresso no DOM, portanto, interpretado. O modelo Ng então é substituído.

Um pouco desagradável, mas usar ng-if faz o truque:

<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" />

Eu recomendaria usar uma verificação mais detalhada dentro das diretivas ng-if :)

Além disso, você pode usar uma expressão como esta:

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

Na verdade, eu escrevi um patch para fazer isso alguns meses atrás (depois que alguém perguntou sobre isso no #angularjs no freenode).

Provavelmente não será mesclado, mas é muito semelhante ao ngClass: https://github.com/angular/angular.js/pull/4269

Seja mesclado ou não, o material ng-attr- * existente provavelmente é adequado às suas necessidades (como outros já mencionaram), embora possa ser um pouco mais complicado do que a funcionalidade do estilo ngClass que você está sugerindo.

Para validação de campo de entrada, você pode:

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

Isto irá aplicar o atributo maxde 100somente se discountTypeé definido como%

Editar : Esta resposta está relacionada ao Angular2 +! Desculpe, eu perdi a etiqueta!

Resposta original:

Quanto ao caso muito simples em que você deseja aplicar (ou configurar) apenas um atributo se um determinado valor de Entrada foi definido, é tão fácil quanto

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

É o mesmo que:

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

(O valor opcional é aplicado se fornecido, caso contrário, a expressão será falsa e o atributo não será aplicado.)

Exemplo: eu tive o caso, onde permiti aplicar uma cor, mas também estilos arbitrários, em que o atributo color não funcionou como já estava definido (mesmo que a cor @Input () não tenha sido fornecida):

@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;
...
}

Portanto, "style.color" foi definido apenas quando o atributo color estava presente, caso contrário, o atributo color na string "styles" poderia ser usado.

Obviamente, isso também pode ser alcançado com

[style.color]="color" 

e

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

No caso de você precisar de uma solução para o Angular 2, então é simples, use a vinculação de propriedades como abaixo; por exemplo, você deseja fazer com que a entrada seja lida apenas condicionalmente e, em seguida, adicione entre colchetes o atributo seguido por = sinal e expressão.

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

Conseguiu fazer isso funcionar:

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

O bom aqui é que, se item.isSelected for false, o atributo simplesmente não será renderizado.