Direttiva angularJS, avvolgere il contenuto e mantenere gli attributi sull'elemento originale

Question

Sono abbastanza nuovo per AngularJS e sto ancora imparando.

Ho un po 'di problemi nel creare una direttiva che avvolge l'elemento (ei suoi figli) a cui è applicata la direttiva. Non capisco perché questo scenario apparentemente comune dovrebbe essere così difficile considerando la facilità con cui molte altre cose comuni sono in AngularJS, quindi potrebbe benissimo essere che mi manca qualcosa qui.

Quello che voglio fare è racchiudere un elemento select in un div. Sto usando transclude per preservare l'elemento select originale e il suo contenuto ma non riesco a farlo funzionare correttamente.

Il codice HTML assomiglia a questo:

<select mlb-select ng-options="opt.val as opt.text for opt in mlb" ng-model="mlbOpt"></select> 

... e la mia direttiva si presenta così:

directiveModule.directive("mlbSelect", function(){ 
    return { 
     template: '<div class="mlb-select">' 
        + '<select ng-transclude></select>' 
        + '</div>', 
     transclude: 'element', 
     replace: true 
    } 
}); 

Il codice HTML risultante è simile al seguente:

<div class="mlb-select ng-pristine ng-valid" mlb-select ng-options="opt.val as opt.text for opt in mlb" ng-model="mlbOpt"> 
    <select ng-transclude class="ng-scope"></select> 
</div> 

Naturalmente questo non è quello che voglio Perché le proprietà del mio elemento select sono aggiunte al div wrapping e non all'elemento che ho specificato con l'attributo ng-transclude? L'elemento select deve conservare le opzioni ng-options e ng-model.

Cosa devo fare per eseguire questa operazione?

Answer 1

per quanto ne so l'unico modo per farlo è quello di specificare la direttiva con inclusione in un elemento di involucro, per es .:

<div mlb-select> 
    <select ...></select> 
</div> 

Naturalmente non v'è alcun punto in questo modo se il youe caso è esattamente come sopra.

Transclusion nel contesto di questa domanda più o meno funziona come:

1. Il contenuto transclusa è il contenuti dell'elemento che ha la direttiva con transclude: true; nel tuo caso il contenuto di <select>, che è vuoto!
2. Il contenuto escluso viene inserito all'interno dell'elemento che specifica ng-transclude nel modello della direttiva.