Anpassen der Vorlage innerhalb einer Richtlinie

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 Boilerplate-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, stecke ich fest.

Wie kann ich Standardwerte in der Vorlage unterstützen?

Ich möchte den Parameter "type" als optionales Attribut in meiner Direktive verfügbar machen, z.

<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 das Attribut "erforderlich" unterstützen können, wenn es vorhanden ist. Z.B:

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

Wenn requiredes in der Direktive vorhanden ist, möchte ich es dem <input />in der Ausgabe generierten hinzufügen und es ansonsten ignorieren. 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.

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

Ich habe versucht, die von Misko vorgeschlagene Lösung zu verwenden, aber in meiner Situation waren einige Attribute, die in meine HTML-Vorlage eingefügt werden mussten, selbst Anweisungen.

Leider haben nicht alle Anweisungen, auf die in der resultierenden Vorlage verwiesen wird, ordnungsgemäß funktioniert. Ich hatte nicht genug Zeit, um in den Winkelcode einzutauchen und die Grundursache herauszufinden, fand aber eine Problemumgehung, die möglicherweise hilfreich sein könnte.

Die Lösung bestand darin, den Code, der die HTML-Vorlage erstellt, von der Kompilierung in eine Vorlagenfunktion zu verschieben. Beispiel basierend auf Code von oben:

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

Die obigen Antworten funktionieren leider nicht ganz. Insbesondere hat die Kompilierungsphase keinen Zugriff auf den Bereich, sodass Sie das Feld nicht basierend auf dynamischen Attributen anpassen können. Die Verwendung der Verknüpfungsstufe scheint die größte Flexibilität zu bieten (in Bezug auf das asynchrone Erstellen von Dom usw.). Der folgende Ansatz befasst sich mit folgenden Aspekten:

<!-- 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));
      }
    }
  }
})

Ich habe einen Kern mit vollständigerem Code und einer Beschreibung des Ansatzes erstellt.

Folgendes habe ich letztendlich verwendet.

Ich bin sehr neu bei AngularJS und würde gerne bessere / alternative Lösungen sehen.

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

Anwendungsbeispiel:

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