使用ng-transclude的ui-expand可折叠面板中的自定义面板

Question

我正在尝试在我的angular 1.5应用程序中实现自定义展开折叠面板。它将标头和正文作为html接受。

组件-

android:layout_height="18dp"

ui-collapsible-panel.html

 var uiCollapsiblePanel = {
   transclude: {
     header: 'uiCollapsiblePanelHeader',
     body: 'uiCollapsiblePanelBody'
     },
   bindings: {
     isOpen: '='
     },
   templateUrl: './ui-collapsible-panel.html',
   controller: 'uiCollapsiblePanelController',
   controllerAs: 'ucpc'
   };

 angular
  .module('common')
  .component('uiCollapsiblePanel', uiCollapsiblePanel);

app.html

---

   <uib-accordion>
    <div uib-accordion-group is-open="true">
     <uib-accordion-heading>
      <div ng-transclude="uiCollapsiblePanelHeader"></div>
     </uib-accordion-heading>
    <div ng-transclude="uiCollapsiblePanelBody"></div>
    </div>
   </uib-accordion>

这里可以在标头中放置一些html内容，但是可折叠组件似乎有些损坏。有人可以帮助我确定自己在做什么错