AngularJS:Comment faire pour objet de mappage d'attributs HTML

Question

permettez-moi de décrire ce que je suis en train de faire.Je fais construire une vraiment dynamique, ng directive pour construire le tableau basé sur les données de tableau et objet de configuration fourni.Ce que je veux savoir, c'est comment assigner des attributs de façon dynamique en fonction d'un objet dans le champ d'application.Disons que j'ai un objet quelque part dans le champ d'application comme:

$scope.inputs.myInput = {
    type : "number",
    size : 3,
    min : 0,
    ...
}

et ainsi de suite, et quelque part dans mon template est

<tr><td>other stuff</td><td><input {{assign the attributes somehow}} /></td></tr>

et le résultat serait:

<tr><td>other stuff</td><td><input type='number' size='3' min='0' ... /></td></tr>

Est-ce possible en quelque sorte?

Ce que j'ai essayé:Actuellement, j'ai réussi à créer une entrée pour chaque élément dans le tableau d'entrée dans chaque ligne et je peux assigner un type par type={{type}} mais les attributs html peuvent être différents pour chaque type d'élément d'entrée et je pense qu'il serait méchant pour assigner des attributs de l'élément "codée en dur" chemin et s'est coincé ici.

Merci d'avance pour tous vos commentaires!

Answer 1

Voici un plunk pour vous:

.directive('dynamicAttributes', function($parse){
  return function($scope, $element, $attrs) {
    var attrs = $parse($attrs.dynamicAttributes)($scope);
    for (var attrName in attrs) {
      $attrs.$set(attrName, attrs[attrName]);
    }
  }
})

Il suffit de passer votre objet de paires nom-valeur attribut de la dynamic-attributes attribut et la directive de l'ajouter pour vous:

dynamic-attributes="{style:'background: red;height:200px;', class: 'red'}"

Dans votre cas, il serait quelque chose comme ça:

<input dynamic-attributes="inputs.myInput">