Personalización de la plantilla dentro de una directiva.

Tengo un formulario que utiliza el marcado de Bootstrap, como el siguiente:

<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>

Ahí hay un montón de código repetitivo, que me gustaría reducir a una nueva directiva: entrada de formulario, como la siguiente:

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

genera:

   <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>

Tengo mucho trabajo a través de una plantilla simple.

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>'

        }
    })

Sin embargo, cuando llego a agregar una funcionalidad más avanzada, me quedo atascado.

¿Cómo puedo soportar los valores predeterminados en la plantilla?

Me gustaría exponer el parámetro "tipo" como un atributo opcional en mi directiva, por ejemplo:

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

Sin embargo, si no se especifica nada, me gustaría predeterminar"text". ¿Cómo puedo apoyar esto?

¿Cómo puedo personalizar la plantilla en función de la presencia / ausencia de atributos?

También me gustaría poder admitir el atributo "requerido", si está presente. P.ej:

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

Sirequired Está presente en la directiva, me gustaría agregarla a la generada.<input /> En la salida, e ignóralo de lo contrario. No estoy seguro de cómo lograr esto.

Sospecho que estos requisitos pueden haber ido más allá de una plantilla simple, y tienen que comenzar a usar las fases de precompilación, pero no sé por dónde empezar.

Respuestas a la pregunta(4)

Su respuesta a la pregunta