自定義HTML自動換行指令（另一個指令）

Question

假設我有工作指令，稱爲<my-directive>。它做了一些html渲染和事件處理，它經過了徹底的測試。

現在我想換這個指令與其他包裝指令<wrapper>這會使這個HTML片段<div class="my-div">，這樣我就可以寫這樣的代碼：

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

，並具有：

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

這怎麼能實現呢？我已經嘗試過一些方法，他們都沒有工作，所以我沒有發佈任何代碼。

Answer 1

您可以創建包裝指令像

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

演示：Plunker

Answer 2

聽起來好像你是在外部模板缺少ng-transclude和設置transclude外指令如此。該ng-transclude屬性告訴編譯器時transclude設置爲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