Come posso aggiungere automaticamente etichette ai campi di input?

Question

Sto lavorando ad un progetto più grande con AngularJS. Pertanto, voglio rendere il lavoro per una singola forma il più semplice possibile. Come stiamo utilizzando anche bootstrap, il codice per un singolo campo di input in una forma è abbastanza prolisso, forse come

<div class="control-group"> 
    <label class="control-label" for="inputEmail">Email</label> 
    <div class="controls"> 
    <input type="text" id="inputEmail" placeholder="Email"> 
    </div> 
</div> 

Se potessi scrivere un singolo tag come

<custom-input 
    label="Email" 
    name="inputEmail" 
    placeholder="Email" 
    type="text" 
    ... > 
</custom-input> 

invece, questo sarebbe aiuta a mantenere il codice pulito e il lavoro semplice.

Per ottenere questo risultato, sto lavorando a una direttiva AngularJS personalizzata. La mia direttiva attualmente usa un modello simile all'esempio bootstrap dall'alto, assegnando automaticamente l'etichetta al tag di input. Inoltre, la funzione del compilatore della direttiva sposta tutti gli attributi dal tag di input personalizzato al tag di input reale al fine di semplificare la personalizzazione del tag di input personalizzato.

app.directive('customInput', function() { 
    return { 
     require: 'ngModel', 
     restrict: 'E', 
     template: '<div>' + 
        '<label for="{{ name }}">the label</label>' + 
        '<input id="{{ name }}" ng-model="ngModel" />' + 
       '</div>', 
     scope: { 
       ngModel: '=', 
       name: '@name', 
      }, 
     replace: true, 
     compile: function (tElement, tAttrs, transclude) { 
      var tInput = tElement.find('input'); 

      // Move the attributed given to 'custom-input' 
      // to the real input field 
      angular.forEach(tAttrs, function(value, key) { 
       if (key.charAt(0) == '$') 
        return; 
       tInput.attr(key, value); 
       tInput.parent().removeAttr(key); 
      }); 

      return; 
     }, 
    }; 
}); 

su Stack Overflow, ci sono molte domande riguardanti la creazione di campi di input personalizzati, ma si sono interessati con l'data binding, custom formatting o binding to ng-repeat.

Il mio approccio presenta tuttavia un problema diverso: mentre il collegamento dati funziona correttamente, il modulo di convalida modulo integrato di Angular viene confuso quando il campo di input è "richiesto". Per qualche motivo, la convalida non riconosce il nuovo campo di input e invece mantiene il modulo invalido a causa di qualche riferimento morto, che ha un valore vuoto. Si prega di vedere the minimal example.

Da dove viene il riferimento morto? Come posso aggiornare i riferimenti del modulo di validazione? C'è un modo migliore per raggiungere il mio obiettivo generale?

Answer 1

1. Come attributo booleano, esiste una corrispondente proprietà richiesta che è ancora true sul div anche se l'attributo è stato spostato.
2. L'attributo richiesto non viene spostato, deve essere saltato perché non c'è alcun valore. Non so nemmeno aggiungerlo a un elemento utilizzando javascript senza un valore, ma utilizzando il modulo required="required" correzioni che
3. utilizzando transclude=true utilizzerà una copia del tuo elemento dopo la fase di compilazione quando hai spostato gli attributi, penso che questo è necessario impostare una priorità più alta
4. È necessario assegnare una priorità più elevata, forse a causa di ng-model, che non viene rimosso dal div perché il nome in tattrs è ngModel (sebbene la rimozione dal div non rimuova la necessità di priorità)

http://plnkr.co/edit/5bg8ewYSAr2ka9rH1pfE?p=preview

Tutto quello che ho fatto è stato cambiare l'attributo richiesto di essere required="required" e aggiungere queste due righe alla dichiarazione direttiva:

transclude: true, 
    priority: 10, 

ho messo ng-transclude sull'etichetta modello dal modo in modo che il contenuto del vostro elemento andrà in l'etichetta e non devi avere un attributo per questo.