AngularJS:Como objecto de mapa de atributos de HTML

Question

deixe-me descrever o que eu estou tentando fazer.Eu estou construindo um muito dinâmica ng directiva para construir tabela com base nos dados da matriz e objeto de configuração fornecidas.O que eu quero saber é como atribuir atributos dinamicamente com base em um objeto no espaço.Vamos dizer que eu tenho um objeto em algum lugar no âmbito de aplicação, como:

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

e assim por diante e em algum lugar no meu modelo é

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

e o resultado seria:

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

Isso é de alguma forma possível?

O que eu tentei:Atualmente, eu consegui criar uma entrada para cada item na matriz de entrada em cada linha e eu pode atribuir um tipo de type={{type}} mas os atributos html podem ser diferentes para cada tipo de elemento de entrada e eu acho que seria desagradável para definir atributos para o elemento do "hard-coded" forma e ficou preso aqui.

Agradecemos antecipadamente por qualquer feedback!

Answer 1

Aqui está um plunk para você:

.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]);
    }
  }
})

Basta passar o seu objeto de atributo de pares nome-valor para o dynamic-attributes atributo e a directiva irá adicioná-lo para você:

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

No seu caso, seria algo assim:

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