Wrap-Direktive mit benutzerdefiniertem HTML (eine andere Direktive)

Question

Angenommen, ich habe eine funktionierende Direktive namens <my-directive>. Es macht einige HTML-Rendering und Event-Handling, es ist gründlich getestet.

Nun möchte Ich mag diese Richtlinie mit einer anderen Wrapper-Richtlinie wickeln <wrapper>, die diese HTML-Snippet <div class="my-div"> machen werden, so dass ich Code wie diesen schreiben könnte:

<wrapper> 
    <my-directive></my-directive> 
</wrapper> 

und habe:

<div class="my-div"> 
    <my-directive></my-directive> 
</div> 

Wie kann das erreicht werden? Ich habe schon einige Ansätze ausprobiert, keiner von ihnen schien zu funktionieren, also poste ich keinen Code.

Answer 1

Sie können die Wrapper-Direktive wie

app.directive('wrapper', function() { 
    return { 
    restrict: 'E', 
    replace: true, 
    transclude: true, 
    template: '<div class="my-div" ng-transclude></div>' 
    }; 
}); 

Demo erstellen: Plunker

Answer 2

Es klingt wie Sie ng-transclude in äußeren Vorlage fehlen und transclude wahr in äußeren Richtlinie festlegen. Das ng-transclude Attribut sagt Compiler wheere die innere html einzufügen, wenn transclude zu true

app.directive('wrapper',function(){ 
return { 
    restrict:'E', 
    template: '<div>Outer wrapper text<div ng-transclude></div></div>', 
    transclude: true, 
    replace:true 
} 
}); 

DEMO http://plnkr.co/edit/sfbRyPZjqsTG6cuiaXZV?p=preview