Personalização do modelo dentro de uma diretiva

Tenho um formulário que usa marcação do Bootstrap, como o seguinte:

<form class="form-horizontal">
  <fieldset>
    <legend>Legend text</legend>
    <div class="control-group">
      <label class="control-label" for="nameInput">Name</label>
      <div class="controls">
        <input type="text" class="input-xlarge" id="nameInput">
        <p class="help-block">Supporting help text</p>
      </div>
    </div>
  </fieldset>
</form>

Há muito código clichê lá, que eu gostaria de reduzir a uma nova diretiva - form-input, como a seguir:

<form-input label="Name" form-id="nameInput"></form-input>

gera:

   <div class="control-group">
      <label class="control-label" for="nameInput">Name</label>
      <div class="controls">
        <input type="text" class="input-xlarge" id="nameInput">
      </div>
    </div>

Tenho tudo isso trabalhando por meio de um modelo simples.

angular.module('formComponents', [])
    .directive('formInput', function() {
        return {
            restrict: 'E',
            scope: {
                label: 'bind',
                formId: 'bind'
            },
            template:   '<div class="control-group">' +
                            '<label class="control-label" for="{{formId}}">{{label}}</label>' +
                            '<div class="controls">' +
                                '<input type="text" class="input-xlarge" id="{{formId}}" name="{{formId}}">' +
                            '</div>' +
                        '</div>'

        }
    })

No entanto, é quando eu venho para adicionar funcionalidades mais avançadas que estou ficando preso.

Como posso oferecer suporte a valores padrão no modelo?

Gostaria de expor o parâmetro "type" como um atributo opcional na minha diretiva, por exemplo:

<form-input label="Password" form-id="password" type="password"/></form-input>
<form-input label="Email address" form-id="emailAddress" type="email" /></form-input>

No entanto, se nada for especificado, gostaria de usar como padrão "text". Como posso apoiar isso?

Como posso personalizar o modelo com base na presença / ausência de atributos?

Eu também gostaria de ser capaz de oferecer suporte ao atributo "required", se estiver presente. Por exemplo:

<form-input label="Email address" form-id="emailAddress" type="email" required/></form-input>

Se requiredestiver presente na diretiva, gostaria de adicioná-lo ao gerado <input />na saída e ignorá-lo caso contrário. Não tenho certeza de como fazer isso.

Suspeito que esses requisitos podem ter ido além de um simples modelo e precisam começar a usar as fases de pré-compilação, mas não sei por onde começar.

angular.module('formComponents', [])
  .directive('formInput', function() {
    return {
        restrict: 'E',
        compile: function(element, attrs) {
            var type = attrs.type || 'text';
            var required = attrs.hasOwnProperty('required') ? "required='required'" : "";
            var htmlText = '<div class="control-group">' +
                '<label class="control-label" for="' + attrs.formId + '">' + attrs.label + '</label>' +
                    '<div class="controls">' +
                    '<input type="' + type + '" class="input-xlarge" id="' + attrs.formId + '" name="' + attrs.formId + '" ' + required + '>' +
                    '</div>' +
                '</div>';
            element.replaceWith(htmlText);
        }
    };
})

Tentei usar a solução proposta por Misko, mas na minha situação, alguns atributos, que precisavam ser integrados ao meu template html, eram eles próprios diretivas.

Infelizmente, nem todas as diretivas referenciadas pelo modelo resultante funcionaram corretamente. Não tive tempo suficiente para mergulhar no código angular e descobrir a causa raiz, mas encontrei uma solução alternativa que poderia ser útil.

A solução foi mover o código, que cria o template html, de compilar para uma função de template. Exemplo baseado no código acima:

    angular.module('formComponents', [])
  .directive('formInput', function() {
    return {
        restrict: 'E',
        template: function(element, attrs) {
           var type = attrs.type || 'text';
            var required = attrs.hasOwnProperty('required') ? "required='required'" : "";
            var htmlText = '<div class="control-group">' +
                '<label class="control-label" for="' + attrs.formId + '">' + attrs.label + '</label>' +
                    '<div class="controls">' +
                    '<input type="' + type + '" class="input-xlarge" id="' + attrs.formId + '" name="' + attrs.formId + '" ' + required + '>' +
                    '</div>' +
                '</div>';
             return htmlText;
        }
        compile: function(element, attrs)
        {
           //do whatever else is necessary
        }
    }
})

As respostas acima, infelizmente, não funcionam bem. Em particular, o estágio de compilação não tem acesso ao escopo, portanto, você não pode personalizar o campo com base em atributos dinâmicos. Usar o estágio de vinculação parece oferecer mais flexibilidade (em termos de criação de dom de forma assíncrona, etc.) A abordagem a seguir aborda o seguinte:

<!-- Usage: -->
<form>
  <form-field ng-model="formModel[field.attr]" field="field" ng-repeat="field in fields">
</form>

// directive
angular.module('app')
.directive('formField', function($compile, $parse) {
  return { 
    restrict: 'E', 
    compile: function(element, attrs) {
      var fieldGetter = $parse(attrs.field);

      return function (scope, element, attrs) {
        var template, field, id;
        field = fieldGetter(scope);
        template = '..your dom structure here...'
        element.replaceWith($compile(template)(scope));
      }
    }
  }
})

Eu criei uma essência com um código mais completo e uma descrição da abordagem.

Aqui está o que acabei usando.

Eu sou muito novo no AngularJS, então adoraria ver soluções melhores / alternativas.

angular.module('formComponents', [])
    .directive('formInput', function() {
        return {
            restrict: 'E',
            scope: {},
            link: function(scope, element, attrs)
            {
                var type = attrs.type || 'text';
                var required = attrs.hasOwnProperty('required') ? "required='required'" : "";
                var htmlText = '<div class="control-group">' +
                    '<label class="control-label" for="' + attrs.formId + '">' + attrs.label + '</label>' +
                        '<div class="controls">' +
                        '<input type="' + type + '" class="input-xlarge" id="' + attrs.formId + '" name="' + attrs.formId + '" ' + required + '>' +
                        '</div>' +
                    '</div>';
                element.html(htmlText);
            }
        }
    })

Exemplo de uso:

<form-input label="Application Name" form-id="appName" required/></form-input>
<form-input type="email" label="Email address" form-id="emailAddress" required/></form-input>
<form-input type="password" label="Password" form-id="password" /></form-input>