Zawiń dyrektywę z niestandardowym HTML (inna dyrektywa)

Question

Załóżmy, że mam działającą dyrektywę o nazwie <my-directive>. Wykonuje renderowanie html i obsługę zdarzeń, jest dokładnie przetestowany.

Teraz chciałbym zawinąć niniejszej dyrektywy w innej dyrektywy owijarki <wrapper> który uczyni ten kod HTML <div class="my-div">, abym mógł napisać kod jak poniżej:

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

i posiadają:

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

Jak można to osiągnąć? Próbowałem już wcześniej niektórych podejść, żaden z nich nie działał, więc nie publikuję żadnego kodu.

Answer 1

Można tworzyć dyrektywę otoki jak

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

Demo: Plunker

Answer 2

Brzmi jak brakuje ng-transclude w szablonie zewnętrzną i ustawienie transclude prawdziwe w dyrektywie zewnętrznej. Atrybut ng-transclude informuje kompilator wheere wstawić wewnętrzną html kiedy transclude jest ustawiony na 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