来自子指令的 Angular Transclude

Question

我有一个用于渲染引导面板的指令，我使用 transclude 来允许我渲染自定义内容，例如

<tn-Panel class="ng-cloak" title="'My Things'" >
    <tn-Thing>
    </tn-Thing>
</tn-Panel>

tn-panel 呈现带有标题的标题并将指令 tn-thing 放置在其中。

我希望能够在正文中呈现内容并在页脚中呈现一些其他内容。

下面的 plunk 显示了这一点

https://plnkr.co/edit/j8U8MZlVSQCFB7RkpwOY?p=preview

但是，它不会渲染内容和标题中的位

  <pane title="Nested">
    <panenested></panenested> <-- does not following the transclude 
  </pane>

Answer 1

更新了你的指令

  .directive('pane', function(){
  return {
    restrict: 'E',
    transclude:  {
        'content': '?content',  
        'footer': '?footer',
        'panenested':'?panenested',
    },
    scope: { title:'@' },
    template: '<div style="border: 1px solid black;">' +
                '<div style="background-color: gray">{{title}}</div>' +
                'Content : <br> <ng-transclude  ng-transclude="content"></ng-transclude> <br>' +
                'Footer : <br> <ng-transclude  ng-transclude="footer"></ng-transclude> <br>' 
                +'<br> <ng-transclude  ng-transclude="panenested"></ng-transclude> <br>'+
              '</div>'
  };