Question

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

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

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

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

以下插件显示了这个

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>'
  };

来自儿童指令的Anglular Transclude

1 个答案: