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:

{{content.title}}

Isso resultaria em contenteditable = true sendo adicionado ao elemento se $scope.editMode fosse configurado como true . Existe alguma maneira fácil de implementar esse comportamento de atributo semelhante à class ng? Estou pensando em escrever uma diretiva e compartilhar se não.

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

Eu estou usando o seguinte para definir condicionalmente a class attr quando ng-class não pode ser usado (por exemplo, quando estilizando SVG):

 ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-https://stackoverflow.com/questions/15696416/what-is-the-best-way-to-conditionally-apply-attributes-in-angularjs/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 em 1.1.4)

Você pode prefixar atributos com ng-attr para eval uma expressão Angular. Quando o resultado das expressões indefinido isso remove o valor do atributo.

 Hello World 

Irá produzir (quando o valor for falso)

 Hello World 

Portanto, não use https://stackoverflow.com/questions/15696416/what-is-the-best-way-to-conditionally-apply-attributes-in-angularjs/false porque isso produzirá a palavra “https://stackoverflow.com/questions/15696416/what-is-the-best-way-to-conditionally-apply-attributes-in-angularjs/false” como o valor.

 Hello World 

Ao usar este truque em uma diretiva. Os atributos da diretiva serão falsos se estiverem faltando um valor.

Por exemplo, o acima seria falso.

 function post($scope, $el, $attr) { var url = $attr['href'] || https://stackoverflow.com/questions/15696416/what-is-the-best-way-to-conditionally-apply-attributes-in-angularjs/false; alert(url === https://stackoverflow.com/questions/15696416/what-is-the-best-way-to-conditionally-apply-attributes-in-angularjs/false); } 

Eu tenho esse trabalho pelo difícil definir o atributo. E controlando a aplicabilidade do atributo usando o valor booleano para o atributo.

Aqui está o trecho de código:

 

Eu espero que isso ajude.

Na versão mais recente do Angular (1.1.5), eles incluíram uma diretiva condicional chamada ngIf . É diferente de ngShow e ngHide em que 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 para criar, mas não são usados:

 

{{content.title}}

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:

Saída

ou

base no valor de params.type

{{content.title}}

produzirá quando isTrue = true:

{{content.title}}

e quando isTrue = https://stackoverflow.com/questions/15696416/what-is-the-best-way-to-conditionally-apply-attributes-in-angularjs/false:

{{content.title}}

Na verdade, eu escrevi um patch para fazer isso alguns meses atrás (depois que alguém perguntou sobre isso em #jangjs 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 estilo ngClass que você está sugerindo.

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

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

  

Independentemente do que está por trás de myValue, o atributo value ainda é impresso no DOM, assim, interpretado. Ng-modelo, em seguida, torna-se substituído.

Um pouco desagradável, mas usando ng-se faz o truque:

   

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

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

 

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

  

Isso aplicará o atributo max a 100 somente se discountType for definido como %

Apenas no caso de você precisar de solução para Angular 2, então é simples, use a binding de propriedade como abaixo, por exemplo, você quer fazer a input somente leitura condicionalmente, em seguida, adicionar chaves quadradas o attrbute seguido de sinal e expressão.