Ich habe ein Formular, das Markup von Bootstrap verwendet, wie das folgende:

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

Es gibt eine Menge Code, den ich auf eine neue Direktive reduzieren möchte - Formulareingabe, wie folgt:

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

erzeugt:

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

Ich habe so viel Arbeit über eine einfache Vorlage.

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

        }
    })

Wenn ich jedoch erweiterte Funktionen hinzufüge, kann ich nicht mehr weiterarbeiten.

Wie kann ich Standardwerte in der Vorlage unterstützen?

Ich möchte den "type" -Parameter als optionales Attribut in meiner Direktive verfügbar machen, zB:

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

Wenn jedoch nichts angegeben ist, möchte ich standardmäßig auf"text". Wie kann ich das unterstützen?

Wie kann ich die Vorlage basierend auf dem Vorhandensein / Fehlen von Attributen anpassen?

Ich möchte auch in der Lage sein, das "erforderliche" Attribut zu unterstützen, wenn es vorhanden ist. Z.B:

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

Obrequired Ist in der Direktive vorhanden, möchte ich diese zum generierten hinzufügen<input /> in der Ausgabe, und ignorieren Sie es ansonsten. Ich bin mir nicht sicher, wie ich das erreichen soll.

Ich vermute, dass diese Anforderungen über eine einfache Vorlage hinausgegangen sind und die Vorkompilierungsphasen verwenden müssen, aber ich weiß nicht, wo ich anfangen soll.