angularjs - 嵌套 ng-tranclude

Question

我有以下代码。我想嵌入 3 个不同的级别，我不明白为什么它不起作用

<div data-panel class="panel">
    <data-panel-heading>
        heading
    </data-panel-heading>
    <data-panel-content>
      content
    </data-panel-content>
</div>

var app = angular.module('mymodule', [])
.directive('panel', function() {
    return {
        transclude: true,
        template: '<div ng-transclude></div>',
    };
})
.directive('panel-heading', function() {
    return {
        restrict: 'E',
        transclude: true,
        template: '<div class="heading" ng-transclude></div>',
    };
})
.directive('panel-content', function() {
    return {
        restrict: 'E',
        transclude: true,
        template: '<div class="content" ng-transclude></div>',
    };
});

我想要发生的事情是这样的：

<div data-panel class="panel">
     <div ng-transclude>
       <div class="heading">
         heading
       </div>
       <div class="content">
         content
       </div>
    </div>
</div>

这是一个演示链接 http://plnkr.co/edit/CIZp7OzrPU5D6db0p7lK

似乎忽略了标题和内容模板。任何想法如何让这个工作