AngularJS Direktive, Inhalt umhüllen und Attribute auf Originalelement beibehalten

Question

Ich bin ziemlich neu in AngularJS und lerne immer noch.

Ich habe ein wenig Probleme beim Erstellen einer Direktive, die das Element (und seine untergeordneten) umschließt, auf die die Direktive angewendet wird. Ich verstehe nicht, warum dieses scheinbar gewöhnliche Szenario so schwierig sein sollte, wenn man bedenkt, wie einfach viele andere alltägliche Dinge in AngularJS sind, also könnte es sehr gut sein, dass ich hier etwas verpasse.

Was ich tun möchte, ist ein auswählbares Element in ein div zu wickeln. Ich verwende transclude, um das ursprüngliche Select-Element und seinen Inhalt beizubehalten, aber ich kann nicht richtig funktionieren.

Das HTML sieht wie folgt aus:

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

... und meine Richtlinie sieht wie folgt aus:

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

Das resultierende HTML sieht wie folgt aus:

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

Natürlich das will ich nicht. Warum werden die Eigenschaften meines Auswahlelements dem Umbruchdiv hinzugefügt und nicht das Element, das ich mit dem ng-transclude -Attribut angegeben habe? Das select-Element muss die ng-options-und ng-model-Eigenschaften beibehalten.

Was muss ich tun, um dies zu erreichen?

Answer 1

AFAIK der einzige Weg, dies zu tun, ist die Richtlinie mit Einbindung in einem Wrapper-Element angeben, z.B .:

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

Natürlich gibt es keinen Grund dies zu tun, wenn youe Fall genau wie oben ist.

Transklusion im Zusammenhang mit dieser Frage arbeitet in etwa wie:

1. Der transkludierte Inhalt ist der Inhalt des Elements, das die Richtlinie mit transclude: true hat; in deinem Fall der Inhalt der <select>, die leer ist!
2. Der übersetzte Inhalt wird in das Element eingefügt, das in der Vorlage der Anweisung ng-transclude angibt.