Ce qui est la meilleure façon d’appliquer conditionnellement attributs dans angulaire ?

Question

J'ai besoin d'être en mesure d'ajouter par exemple "contenteditable" éléments, basé sur une variable booléenne sur le champ.

Exemple d'utilisation:

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

Entraînerait contenteditable=true être ajoutée à l'élément si $scope.editMode a été fixé pour true. Est-il un moyen facile de mettre en œuvre ce ng-classe comme attribut de comportement? J'envisage la rédaction d'une directive et partage si pas.

Edit: Je peux voir qu'il semble y avoir des similitudes entre ma proposition de directive attrs et ng-bind-attrs, mais il a été supprimé dans la version 1.0.0.rc3, pourquoi donc?

Answer 1

J’utilise ce qui suit pour définir conditionnellement la classe attr lorsque ng-classe ne peut être utilisé (par exemple quelle style SVG) :

La même approche devrait fonctionner pour les autres types d’attributs.

(Je pense que tu dois être le dernier instable angulaire d’utiliser ng - attr-, je suis actuellement sur 1.1.4)

Answer 2

Vous pouvez ajouter un préfixe attributs ng- d'eval Angulaire de l'expression. Lorsque le résultat de l'expression est undefined, ce qui supprime la valeur de l'attribut.

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

(Quand la valeur est false)

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

Donc, ne pas utiliser false parce que cela va produire le mot "faux" comme valeur.

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

Lorsque vous utilisez cette astuce dans une directive. Les attributs de la directive sera falsy si elles sont manquantes d'une valeur.

Par exemple, ci-dessus serait fausse.

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

Answer 3

"La meilleure façon conditionnelle, appliquer des attributs" en utilisant Angulaire directives serait d'utiliser ng-switch:

<span ng-switch on="editMode">
  <h1 ng-switch-when="true" contenteditable=true>{{content.title}}</h1>
  <h1 ng-switch-default>{{content.title}}</h1>
</span>

Oui, il est plus bavarde que votre proposition de directive attrs, mais elle a l'avantage d'être intégré.

_{Je doute que cette réponse ne vous satisfait Kenneth, que j'ai l'impression que vous aimeriez avoir une directive pour cela. Mais la question du titre étant ce qu'elle est, j'ai pensé que quelqu'un doit mentionner ng-switch pour les futurs lecteurs.}

Answer 4

Dans la dernière version du moment cinétique (1.1.5), ils ont inclus une directive conditionnelle appelée . Il est différent de et `` que les éléments ne sont pas cachées, mais non inclus dans le modèle DOM du tout. Ils sont très utiles pour les composants qui sont coûteux à créer, mais ne sont pas utilisés :

Answer 5

J'ai en fait écrit un patch pour ce faire il y a quelques mois (après que quelqu'un a demandé à ce sujet dans #angularjs sur freenode).

Il ne sera probablement pas être fusionnés, mais c'est très similaire à ngClass: https://github.com/angular/angular.js/pull/4269

S'il est fusionné ou non, le ng-attr-* choses est probablement adapté à vos besoins (comme d'autres l'ont mentionné), mais il peut-être un peu moins agiles que les plus ngClass-fonctionnalité de style que vous êtes en train de suggérer.