Personalizzazione del modello all'interno di una direttiva

Ho un modulo che utilizza il markup di Bootstrap, come il seguente:

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

C'è un sacco di codice boilerplate lì dentro, che vorrei ridurre a una nuova direttiva - form-input, come segue:

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

Ho lavorato così tanto tramite un semplice modello.

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

        }
    })

Tuttavia è quando vengo ad aggiungere funzionalità più avanzate che rimango bloccato.

Come posso supportare i valori predefiniti nel modello?

Vorrei esporre il parametro "tipo" come attributo opzionale sulla mia direttiva, ad esempio:

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

Tuttavia, se non viene specificato nulla, vorrei impostare l'impostazione predefinita "text". Come posso supportarlo?

Come posso personalizzare il template in base alla presenza / assenza di attributi?

Mi piacerebbe anche poter supportare l'attributo "required", se presente. Per esempio:

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

Se requiredè presente nella direttiva, vorrei aggiungerlo al file generato<input /> nell'output e ignorarlo altrimenti. Non sono sicuro di come ottenerlo.

Sospetto che questi requisiti possano essere andati oltre un semplice modello e debbano iniziare a utilizzare le fasi di precompilazione, ma non sono in grado di iniziare.

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

Ho provato a utilizzare la soluzione proposta da Misko, ma nella mia situazione, alcuni attributi, che dovevano essere fusi nel mio template html, erano essi stessi delle direttive.

Sfortunatamente, non tutte le direttive a cui fa riferimento il modello risultante funzionavano correttamente. Non ho avuto abbastanza tempo per immergermi nel codice angolare e scoprire la causa principale, ma ho trovato una soluzione alternativa, che potrebbe potenzialmente essere utile.

La soluzione era spostare il codice, che crea il template html, dalla compilazione a una funzione template. Esempio basato sul codice dall'alto:

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

Le risposte di cui sopra purtroppo non funzionano del tutto. In particolare, la fase di compilazione non ha accesso all'ambito, quindi non è possibile personalizzare il campo in base agli attributi dinamici. L'utilizzo della fase di collegamento sembra offrire la massima flessibilità (in termini di creazione asincrona di dom, ecc.) L'approccio seguente si rivolge a quanto segue:

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

Ho creato una sintesi con un codice più completo e una descrizione dell'approccio.

Ecco cosa ho finito per usare.

Sono molto nuovo su AngularJS, quindi mi piacerebbe vedere soluzioni migliori / alternative.

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

Utilizzo di esempio:

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