1

Eu estou construindo uma aplicação que precisa renderizar um formulário dinâmico.

Os dados do formulário vem de um json, e nele, tenho a configuração dos campos.

Segue exemplo:

{
"Fields": [
{
  "title": "Assunto",
  "type": "text"
},
{
  "title": "Email da tia",
  "type": "email",
}]
}

Existe alguma forma de criar diretivas dinâmicamente, usando atributo ou classe, definindo priority alta?

Por exemplo:

<section ng-repeat="field in Fields">
   <field-builder data-type="field.type"></field-builder>
</section>

E nesta diretiva, field builder, ela gerar diretivas retornando por exemplo(com priority menor):

<span class="text"></span>
<span class="email"></span>

Existindo claro, uma forma de compilar cada uma após o ng-repeat.

Alguma forma de fazer isto?

3
  • Acho que o melhor é gerar um HTML e dar append bindada em uma div com o atributo ng-bind-unsafe, se não me engano. Mas nunca fiz. Só acho que funciona. Commented 27/02/2015 às 1:42
  • Não adianta, preciso usar outros atributos, montar selects, usar máscaras... Commented 27/02/2015 às 1:44
  • Por isso que precisa do atributo ng-bind-unsafe. Se pro montar você quer dizer "utilizar", acredito sim que funcione. Mas como disse, só testando mesmo. Commented 27/02/2015 às 1:46

1 Resposta 1

2

Consegui resolver da seguinte forma:

//View aonde é renderizado os elementos:
<fieldset>
       <section ng-repeat="field in preview.model.Field">
            <field-builder field-model="field"></field-builder>
      </section>
</fieldset>

//Diretiva com templateCache para evitar múltiplas requisições.
function fieldBuilder($compile, viewsUrl, $templateCache, $http) {
    var linker = function (scope, element) {
        //Neste local tenho as partials pré definidas para cada input que preciso gerar.
        var templateUrl = viewsUrl + 'templates/field/' + scope.field.type + '.html';
                               //Efetua o cache
        $http.get(templateUrl, {cache: $templateCache})
                .then(function (response) {
                    element.html(response.data);
                    $compile(element.contents())(scope);
                });
    };
    return {
        restrict: "E",
        transclude: true,
        link: linker,
        scope: {
            field: '=fieldModel'
        }
    };
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .